sasp-flow-render 1.0.1

package/src/components/userSelect.vue

@@ -0,0 +1,537 @@
+<template>
+    <div class="select-all">
+        <div class="select-all-border">
+            <div class="left-block">
+                <div style="width: 100%;height: 100%;position: relative;padding-top: 40px;box-sizing: border-box">
+                    <div class="button-class">
+                        <el-input v-model="filterText" style="width: 100%" clearable
+                                  placeholder="请输入" size="small" class="search-input">
+                            <i slot="append" class="el-icon-search"></i>
+                        </el-input>
+                    </div>
+                    <div class="tree-block" :style="{'padding-top':showDim ? '40px' : '0'}">
+                        <el-radio-group v-model="chooseDim" size="small" v-if="showDim"
+                                        @change="changeEvt"
+                                        style="position: absolute;top: 0;left: 0">
+                            <el-radio-button v-for="item in orgDimArr" :key="item.value" :label="item.value">{{item.label}}</el-radio-button>
+                        </el-radio-group>
+                        <div style="width: 100%;height: 100%;overflow-y: auto">
+                            <el-tree
+                                    ref="treeRef"
+                                    :data="treeData"
+                                    show-checkbox
+                                    check-strictly
+                                    node-key="dataKey"
+                                    @check="checkChange"
+                                    v-loading="loading"
+                                    element-loading-text="加载中"
+                                    :filter-node-method="filterNodeFnc"
+                                    :render-content="renderContentFunc"
+                                    v-if="showTree"
+                                    :props="defaultProps">
+                            </el-tree>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="right-block">
+                <div :style="{height: userPercent}" class="choose-div">
+                    <el-divider content-position="left" style="position: absolute;top: 0;">{{'已选择用户(' + chooseUsers.length + ')'}}</el-divider>
+                    <div style="height: 100%;overflow-y: auto">
+                        <el-tag plain closable v-for="(item,index) in chooseUsers" @close="removeTag(item)"
+                                class="choose-tag" :key="index">{{item.dataLabel}}</el-tag>
+                    </div>
+                </div>
+                <div style="height: 25%;" class="choose-div" v-if="orgEnable">
+                    <el-divider content-position="left" style="position: absolute;top: 0;">{{'已选择组织(' + chooseOrgs.length + ')'}}</el-divider>
+                    <div style="height: 100%;overflow-y: auto">
+                        <el-tag plain closable v-for="(item,index) in chooseOrgs" @close="removeTag(item)"
+                                class="choose-tag" :key="index">{{item.dataLabel}}</el-tag>
+                    </div>
+                </div>
+                <div style="height: 25%;" class="choose-div" v-if="posEnable">
+                    <el-divider content-position="left" style="position: absolute;top: 0;">{{'已选择岗位(' + choosePoses.length + ')'}}</el-divider>
+                    <div style="height: 100%;overflow-y: auto">
+                        <el-tag plain closable v-for="(item,index) in choosePoses" @close="removeTag(item)"
+                                class="choose-tag" :key="index">{{item.dataLabel}}</el-tag>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "user-select",
+        props:{
+            orgAvailable:{type:Boolean,default:false},  // 组织是否可用，管理平台选择人员组织可选择组织岗位
+            checkedInfos:{type:Object,default:() => {
+                return {};
+            }},
+            checkbox:{type:Boolean,default:true},  // 是否多选
+            chooseUserIds:{type:String,default:""},  // 选择用户ID
+        },
+        data(){
+            return {
+                filterText:"",
+                defaultProps: {
+                    children: 'children',
+                    label: 'dataLabel',
+                    disabled:'dataDisabled'
+                },
+                treeData:[],
+                treeDataBak:[],
+                sysInterfaceObj:{},
+                doMainDatasObj:{},
+                dataTreeArr:[],
+                showDim:false,
+                orgDimArr:[],
+                count:0,
+                initSuccess:false,
+                chooseDim:"",
+                chooseUsers:[],
+                chooseOrgs:[],
+                choosePoses:[],
+                userPercent:'50%',
+                userEnable:true,
+                orgEnable:false,
+                posEnable:false,
+                loading:true,
+                showTree:true,
+            }
+        },
+        watch:{
+            filterText(val){
+                this.$refs.treeRef.filter(val);
+            }
+        },
+        created() {
+            this.init();
+        },
+        methods:{
+            init(){
+                this.loading = true;
+                // 先载入系统接口数据
+                this.axios.post(this.api.plFlowInterface.find,{interStatus:'1',interType:'sys'}).then(res => {
+                    (res.data || []).forEach(item => {
+                        this.sysInterfaceObj[item.sysInterName] = item;
+                    })
+                    if(!this.sysInterfaceObj['userData']){
+                        this.$message.error("用户数据接口未配置，无法加载用户数据！");
+                        this.loading = false;
+                        return;
+                    }
+                    this.loadUserData();
+                })
+            },
+            /**
+             * 加载用户数据，若用户数据加载失败不进行渲染
+             */
+            loadUserData(){
+                let dataInter = this.sysInterfaceObj['userData'];
+                this.axios.post(this.api.plFlowDomain.find,{status:'1'}).then(res => {
+                    (res.data || []).forEach(item => {
+                        this.doMainDatasObj[item.id] = item.domainUrl;
+                    })
+                    // 解析用户数据
+                    this.analyseRequest(dataInter).then(data => {
+                        let checkedUserKeys = Object.keys(this.checkedInfos["user"] || {});
+                        let chooseUsers = this.chooseUserIds.split(",");
+                        data.forEach(item => {
+                            item.dataUserId = item[dataInter["idCode"] || "userId"];
+                            item.dataKey = item.dataUserId;
+                            item.flowDataType = "user";
+                            item.dataLabel = item[dataInter["showCode"] || "userName"];
+                            item.dataOrgId = item[dataInter["orgCode"] || "orgId"];
+                            item.dataPosId = item[dataInter["posCode"] || "posId"];
+                            if(item.dataOrgId){
+                                item.dataParentId = item.orgId;
+                            }
+                            if(item.dataPosId){
+                                item.dataParentId = item.posId;
+                            }
+                            if(checkedUserKeys.indexOf(item.dataKey) > -1 || chooseUsers.indexOf(item.dataKey) > -1){
+                                this.chooseUsers.push(item);
+                            }
+                        })
+                        this.dataTreeArr.push(...data);
+                        this.resolveMethod();
+                        this.initOrgData().then(() => {
+                            this.resolveMethod();
+                        });
+                        this.initPosData().then(() => {
+                            this.resolveMethod();
+                        });
+                    })
+                })
+            },
+            initOrgData(){
+                return new Promise(resolve => {
+                    let dataInter = this.sysInterfaceObj['orgData'];
+                    if(!dataInter){
+                        this.orgEnable = false;
+                        resolve();
+                        return;
+                    }
+                    this.showDim = false;
+                    // 解析组织数据
+                    this.analyseRequest(dataInter).then(data => {
+                        if(data.length === 0 || !this.orgAvailable){ // 组织岗位不可选择时，禁用右侧选择框显示
+                            this.orgEnable = false;
+                        }else{
+                            this.orgEnable = true;
+                        }
+                        let orgDimArr = [];
+                        let dimIdArr = [];
+                        let checkedOrgKeys = Object.keys(this.checkedInfos["org"] || {});
+                        data.forEach(item => {
+                            item.dataOrgId = item[dataInter["orgCode"] || "orgId"];
+                            item.dataKey = item.dataOrgId;
+                            item.flowDataType = "org";
+                            item.dataLabel = item[dataInter["orgNameCode"] || "orgName"];
+                            item.dataOrgDim = item[dataInter["orgTypeCode"] || "orgDim"];
+                            item.dataDimName = item[dataInter["orgTypeNameCode"] || "dimName"];
+                            item.dataParentId = item[dataInter["parentCode"] || "orgParentId"];
+                            if(item.dataOrgDim && dimIdArr.indexOf(item.dataOrgDim) === -1){
+                                orgDimArr.push({
+                                    label:item.dataDimName,
+                                    value:item.dataOrgDim
+                                });
+                                dimIdArr.push(item.dataOrgDim);
+                            }
+                            if(!this.orgAvailable){
+                                item.dataDisabled = true;
+                            }
+                            if(checkedOrgKeys.indexOf(item.dataKey) > -1){
+                                this.chooseOrgs.push(item);
+                            }
+                        })
+                        if(orgDimArr.length > 0){
+                            this.showDim = true;
+                            this.orgDimArr = orgDimArr;
+                            this.chooseDim = this.orgDimArr[0].value;
+                        }
+                        this.dataTreeArr.push(...data);
+                        resolve();
+                    })
+                })
+            },
+            initPosData(){
+                return new Promise(resolve => {
+                    let dataInter = this.sysInterfaceObj['posData'];
+                    if(!dataInter){
+                        this.posEnable = false;
+                        resolve();
+                        return;
+                    }
+                    // 解析岗位数据
+                    this.analyseRequest(dataInter).then(data => {
+                        if(data.length === 0 || !this.orgAvailable){ // 组织岗位不可选择时，禁用右侧选择框显示
+                            this.posEnable = false;
+                        }else{
+                            this.posEnable = true;
+                        }
+                        let checkedPosKeys = Object.keys(this.checkedInfos["pos"] || {});
+                        data.forEach(item => {
+                            item.dataPosId = item[dataInter["posCode"] || "posId"];
+                            item.dataKey = item.dataPosId;
+                            item.flowDataType = "pos";
+                            item.dataLabel = item[dataInter["posNameCode"] || "posName"];
+                            item.dataOrgId = item[dataInter["orgCode"] || "orgId"];
+                            item.dataParentId = item[dataInter["parentCode"] || "parentPosId"];
+                            if((!item.dataParentId || item.dataParentId === '-1') && item.dataOrgId){
+                                item.dataParentId = item.dataOrgId;
+                            }
+                            if(!this.orgAvailable){
+                                item.dataDisabled = true;
+                            }
+                            if(checkedPosKeys.indexOf(item.dataKey) > -1){
+                                this.choosePoses.push(item);
+                            }
+                        })
+                        this.dataTreeArr.push(...data);
+                        resolve();
+                    })
+                })
+            },
+            resolveMethod(){
+                this.count++;
+                if(this.count === 3){
+                    this.initSuccess = true;
+                    if(this.orgEnable || this.posEnable){
+                        this.userPercent = "75%";
+                    }
+                    if(this.orgEnable && this.posEnable){
+                        this.userPercent = "50%";
+                    }
+                    if(!this.orgEnable && !this.posEnable){
+                        this.userPercent = "100%";
+                    }
+                    this.buildTree();
+                }
+            },
+            buildTree(){
+                let paramSetting = {
+                    "id": "dataKey",
+                    "pId": "dataParentId",
+                }
+                this.treeData = this.COMMON_FUNC.buildElTree(this.dataTreeArr,paramSetting);
+                let checkedKeys = [];
+                Object.keys(this.checkedInfos || {}).forEach(type => {
+                    checkedKeys.push(...(Object.keys(this.checkedInfos[type])));
+                })
+
+                if(this.showDim && this.orgDimArr.length > 1){
+                    this.treeDataBak = JSON.parse(JSON.stringify(this.treeData));
+                    this.showDimData();
+                }
+
+                this.$nextTick(() => {
+                    this.loading = false;
+                    this.$refs.treeRef.setCheckedKeys(checkedKeys);
+                    this.expandFirst();
+                })
+            },
+            showDimData(){
+                this.treeData = this.treeDataBak.filter(item => {
+                    return item.dataOrgDim === this.chooseDim;
+                })
+            },
+            expandFirst(){
+                let nodesMap =  this.$refs.treeRef.store.nodesMap || {};
+                Object.keys(nodesMap).forEach(key => {
+                    if(nodesMap[key].level == 1){
+                        nodesMap[key].expanded = true;
+                    }
+                });
+            },
+            changeEvt(){
+                this.showTree = false;
+                this.showDimData();
+                this.$nextTick(() => {
+                    this.showTree = true;
+                    let checkedKeys = []
+                    let arr = ['chooseUsers','chooseOrgs','choosePoses'];
+                    arr.forEach(key => {
+                        (this[key] || []).forEach(item => {
+                            checkedKeys.push(item.dataKey);
+                        })
+                    })
+                    this.$nextTick(() => {
+                        this.$refs.treeRef.setCheckedKeys(checkedKeys);
+                        this.expandFirst();
+                    })
+                })
+            },
+            // treeNodeExpandFunc(data,node,comp){
+            //     this.$nextTick(function () {
+            //         let domCollection = document.getElementsByClassName("row-hide");
+            //         for(let i = 0;i < domCollection.length;i++){
+            //             domCollection[i].parentNode.parentNode.style.display = 'none';
+            //         }
+            //     })
+            // },
+            renderContentFunc(h, { node, data}){
+                let rowClass= "";
+                if(data.hidden){
+                    rowClass = "row-hide";
+                }
+                if(data.flowDataType == "org"){
+                    return (
+                        <span class={rowClass}>
+                            <i class={'saspiconfont pl-icon-organ'}></i>
+                            <span>{node.label}</span>
+                        </span>
+                    );
+                }
+                if(data.flowDataType == "pos"){
+                    return (
+                        <span>
+                            <i class={'saspiconfont pl-icon-untitled85'}></i>
+                        <span>{node.label}</span>
+                    </span>
+                    );
+                }
+                let MyComempte = (
+                    <span>
+                        <i class={'saspiconfont pl-icon-account1'}></i>
+                        <span>{node.label}</span>
+                    </span>
+                );
+                return  MyComempte;
+            },
+            analyseRequest(dataInter){
+                return new Promise(resolve => {
+                    let result = this.INTER_CACHE.getCacheInfo(dataInter.sysInterName);
+                    if(result){
+                        resolve(result);
+                        return;
+                    }
+
+                    let domainUrl = this.doMainDatasObj[dataInter.domainId] || "";
+                    let url = domainUrl + dataInter.requestUrl;
+                    let requestParam = JSON.parse(dataInter.requestParam || "[]");
+                    let obj = {};
+                    requestParam.forEach(item => {
+                        if(!item.key){
+                            return;
+                        }
+                        obj[item.key] = item.value || ""; // 注意这里要replace ${userCode}
+                    })
+                    if(dataInter.requestType === 'post'){
+                        this.axios.post(url,obj).then(res => {
+                            this.INTER_CACHE.setCacheInfo(dataInter.sysInterName,res.data);
+                            resolve(res.data || []);
+                        })
+                    }else{
+                        let params = "";
+                        let arr = []
+                        Object.keys(obj).forEach(key => {
+                            arr.push(key + "=" + obj[key]);
+                        })
+                        params = arr.join("&");
+                        if(params){
+                            if(url.indexOf("?") > -1){
+                                url += "&" + params;
+                            }else{
+                                url += "?" + params;
+                            }
+                        }
+                        this.axios(url).then(res => {
+                            this.INTER_CACHE.setCacheInfo(dataInter.sysInterName,res.data);
+                            resolve(res.data || []);
+                        })
+                    }
+                })
+            },
+            filterNodeFnc(value, data){
+                if (!value) {
+                    return true;
+                }
+                if(this.chooseDim  && this.showDim && data.flowDataType === "org" && data.dataOrgDim !== this.chooseDim){
+                    return false;
+                }
+                if(data["dataLabel"]){ // 如果当前数据的label为undefined，直接返回false
+                    return data["dataLabel"].toLowerCase().indexOf(value.toLowerCase()) !== -1;
+                }else{
+                    return false;
+                }
+            },
+            checkChange(data,checkInfos){
+                let checkedKeys = checkInfos["checkedKeys"] || [];
+                let obj = {user:"chooseUsers",org:"chooseOrgs",pos:"choosePoses"};
+                let arr = this[obj[data.flowDataType]] || [];
+                if(checkedKeys.indexOf(data.dataKey) > -1){
+                    if(this.checkbox){
+                        arr.push(data);
+                    }else{
+                        this[obj[data.flowDataType]] = [data];
+                        this.$refs.treeRef.setCheckedKeys([data.dataKey]);
+                    }
+                }else{
+                    (this[obj[data.flowDataType]]) = arr.filter(item => {
+                        return item.dataKey !== data.dataKey;
+                    });
+                }
+            },
+            getCheckedInfo(type){
+                let obj = {user:"chooseUsers",org:"chooseOrgs",pos:"choosePoses"};
+                if(!obj[type]){
+                    return [];
+                }
+                return JSON.parse(JSON.stringify(this[obj[type]]));
+            },
+            removeTag(data){
+                let obj = {user:"chooseUsers",org:"chooseOrgs",pos:"choosePoses"};
+                let arr = this[obj[data.flowDataType]] || [];
+                (this[obj[data.flowDataType]]) = arr.filter(item => {
+                    return item.dataKey !== data.dataKey;
+                });
+                let checkNodes = this.$refs.treeRef.getCheckedNodes();
+                // 删除节点
+                for(let i = 0; i < checkNodes.length; i++){
+                    if(checkNodes[i].dataLabel === data.dataLabel) {
+                        checkNodes.splice(i, 1);
+                        break;
+                    }
+                }
+                // 设置 tree 选中的节点
+                this.$refs.treeRef.setCheckedNodes(checkNodes);
+            }
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    .select-all{
+        width: 100%;height: 100%;padding: 20px;box-sizing: border-box;
+        .select-all-border{
+            width: 100%;height: 100%;border: 1px solid #DEDEDE;
+            .left-block{
+                width: 50%;height:100%;float: left;box-sizing: border-box;padding: 10px;position: relative;
+                .tree-block{
+                    width: 100%;height: 100%;overflow-y: auto;position: relative;box-sizing: border-box;
+                    /deep/ .el-tree-node__content .is-disabled{
+                        display: none;
+                    }
+                }
+                .button-class{
+                    position: absolute;height: 40px;width: 100%;top: 0;left: 0;box-sizing: border-box;
+                    .search-input{
+                        /deep/ .el-input__inner{
+                            border-right: 0;
+                        }
+                        /deep/ .el-input__inner:focus{
+                            border-color: #DCDFE6;
+                        }
+                        /deep/ .el-input-group__append{
+                            background-color: white;
+                            padding: 0 10px 0 0;
+                            border-radius: 0;
+                        }
+                    }
+                }
+                /deep/ .el-radio-button__inner{
+                    border-radius: 0;
+                }
+            }
+            ::-webkit-scrollbar {
+                width: 5px;
+            }
+            .right-block{
+                width: 50%;height:100%;float: right;box-sizing: border-box;border-left: 1px solid #DEDEDE;
+                padding: 10px 20px;
+                .choose-div{
+                    box-sizing: border-box;position: relative;padding-top: 45px;
+                }
+                .choose-tag{
+                    border-radius: 0;
+                    margin: 10px;
+                }
+                /deep/ .el-divider--horizontal{
+                    position: absolute;
+                    top: 0;
+                    .el-divider__text{
+                        font-weight: bold;
+                    }
+                }
+                ::-webkit-scrollbar {
+                    width: 0;
+                }
+            }
+            /deep/ .el-input__inner{
+                border-radius: 0;
+            }
+            /deep/ .el-input__inner:hover{
+                border-color: #DCDFE6!important;
+            }
+            /deep/ .el-textarea__inner{
+                border-radius: 0;
+            }
+            /deep/ .el-button{
+                border-radius: 0;
+            }
+        }
+    }
+</style>