sasp-admin 0.2.57

package/src/views/resources/tabs/comp/pageResRegister.vue

@@ -0,0 +1,1120 @@
+<!--注册到资源池页面-->
+<template>
+    <el-container style="height: 100%;overflow-y: hidden" v-loading="loading" element-loading-text="加载中">
+        <el-container style="box-sizing: border-box;height: 100%"  class="resouceConfigClass">
+            <el-aside style="width: 300px;padding-top: 10px" class="p-asideTree">
+                <el-header style="height: 40px;">
+                    <el-input size="small" style=""
+                              prefix-icon="el-icon-search"
+                              placeholder="输入视图名称进行过滤"
+                              clearable
+                              v-model="filterText">
+                    </el-input>
+                </el-header>
+                <el-tree
+                         v-if="showTreeDialog"
+                         class="asideTree"
+                         :data="viewData"
+                         node-key="id"
+                         ref="viewRef"
+                         :filter-node-method="filterNode"
+                         @node-click="nodeClick"
+                         default-expand-all
+                         :expand-on-click-node="false"
+                         :render-content="renderContent">
+                </el-tree>
+            </el-aside>
+            <el-main style="padding: 0;box-sizing: border-box;width: 100%;height: 100%;overflow:auto">
+                <el-form :model="form" label-width="120px" ref="resourceConfigRef" size="small">
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="视图名称" >
+                                {{form.rname}}
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-tabs :tab-position="'top'" v-model="activeName" @tab-click="tabClick"
+                             style="height: 100%;margin-left:50px">
+                        <el-tab-pane v-for="(item,index) in tabArr" v-if="form[item.showCode]"
+                                     :label="item.name" :name="item.tabName" :key="index">
+                            <span slot="label">{{item.name}}
+                                <i class="el-icon-check" v-if="sourcesObj[form[item.showCode]]"></i>
+                            </span>
+                            <el-row>·
+                                <el-col :span="12">
+                                    <el-form-item label="注册状态" v-if="form.rname && form.name != ''">
+                                        {{form.id?"已注册":"未注册"}}
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                            <el-row>
+                                <el-col :span="24">
+                                    <el-form-item label="权限信息" >
+                                        <el-row>
+                                            <el-col :span="12">
+                                                <el-card class="box-card-class">
+                                                    <div slot="header" class="clearfix">
+                                                        <el-checkbox label="全选" @change="optChange"
+                                                                     v-model="form.allOptAuth" style="margin-right: 0"></el-checkbox>
+                                                        <span  style="font-size: 15px;margin-left: 70px">操作权限</span>
+                                                    </div>
+                                                    <div class="tree">
+                                                        <el-tree
+                                                                class="filter-tree"
+                                                                :data="operationFormData"
+                                                                :show-checkbox="true"
+                                                                default-expand-all
+                                                                @check-change="checkeOptChangeFnc"
+                                                                node-key="key"
+                                                                :props="defaultTreeProps"
+                                                                :render-content="renderOperateContent"
+                                                                :ref="'operatePermisRef_' + item.tabName">
+                                                        </el-tree>
+                                                    </div>
+                                                </el-card>
+                                            </el-col>
+                                            <el-col :span="12">
+                                                <el-card class="box-card-class">
+                                                    <div slot="header" class="clearfix">
+                                                        <el-checkbox label="全选" @change="dataChange"
+                                                                     v-model="form.allDataAuth" style="margin-right: 0"></el-checkbox>
+                                                        <span style="font-size: 15px;margin-left: 70px">数据权限</span>
+                                                    </div>
+                                                    <div class="tree">
+                                                        <el-tree
+                                                                class="filter-tree"
+                                                                :data="dataPermisFormData"
+                                                                :show-checkbox="true"
+                                                                default-expand-all
+                                                                @check-change="checkeDataChangeFnc"
+                                                                node-key="key"
+                                                                :props="defaultTreeProps"
+                                                                :ref="'dataPermisRef_' + item.tabName">
+                                                        </el-tree>
+                                                    </div>
+
+                                                </el-card>
+                                            </el-col>
+                                        </el-row>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+<!--                            <el-row >-->
+<!--                                    <el-col :span="12">-->
+<!--                                        <el-form-item label="是否外部访问" size="small" prop="externalAccess">-->
+<!--                                            <el-radio-group v-model="form.externalAccess" @change="changeExternal">-->
+<!--                                                <el-radio-button label="1">是</el-radio-button>-->
+<!--                                                <el-radio-button label="0">否</el-radio-button>-->
+<!--                                            </el-radio-group>-->
+<!--                                        </el-form-item>-->
+<!--                                    </el-col>-->
+<!--                                    <el-col :span="12">-->
+<!--                                        <el-form-item label="代理地址" size="small" prop="rAgentUrl" v-if="form.externalAccess == '1'" :rules="rAgentUrlPageEq">-->
+<!--                                            <el-input v-model="form.rAgentUrl" style="width: 300px;">-->
+<!--                                            </el-input>-->
+<!--                                        </el-form-item>-->
+<!--                                    </el-col>-->
+<!--                            </el-row>-->
+                        </el-tab-pane>
+                    </el-tabs>
+                    <el-row >
+                        <el-col  style="text-align: center">
+                               <el-button  type="primary"
+                                           :disabled="!form.rname || form.rname == ''"
+                                           icon="el-icon-check" size="small" @click="saveOrUpdate()">注册</el-button>
+
+                        </el-col>
+                    </el-row>
+                </el-form>
+            </el-main>
+
+        </el-container>
+    </el-container>
+</template>
+
+<script>
+    export default {
+        name: "page-res-register",
+        props:{
+        },
+        data(){
+            //表单视图名称唯一性验证
+            let rAgentUrlEqValidate =(type,rule,value,callback) => {
+                if(!value){
+                    callback();
+                }
+                this.axios.post(this.api.resources.find,{rType:type,rAgentUrlEq:value}).then(res =>{
+                    if((res.data ||[]).length == 0){
+                        callback();
+                    }else if(this.form.id){
+                      let temple = res.data.filter(item =>{
+                            return item.id == this.form.id;
+                        });
+                      if(temple.length > 0){
+                          callback();
+                      }else {
+                          return callback(new Error('该代理地址已存在！'));
+                      }
+                    }else{
+                        return callback(new Error('该代理地址已存在！'));
+                    }
+                });
+            };
+
+            let rDataAgentUrlEqValidate =(type,rule,value,callback) => {
+                if(!value){
+                    callback();
+                }
+                this.axios.post(this.api.resources.find,{rType:type,rAgentUrlEq:value}).then(res =>{
+                    if((res.data ||[]).length == 0 ){
+                        callback();
+                    }else if(this.sourceDataIdArr.length > 0){
+                        let temple = res.data.filter(item =>{
+                            return this.sourceDataIdArr.indexOf(item.id) == -1;
+                        });
+                        if(temple.length == 0){
+                            callback();
+                        }else {
+                            return callback(new Error('该代理地址已存在！'));
+                        }
+                    }else{
+                        return callback(new Error('该代理地址已存在！'));
+                    }
+                });
+            };
+
+
+            return{
+                form:{ //页面资源
+                    allOptAuth:false ,//操作权限全选
+                    allDataAuth:false ,//数据权限权限
+                } ,//正在编辑的表单or列表实体
+
+                dataForm:{ //数据资源
+                },
+
+                operationFormData:[], //操作权限
+                dataPermisFormData:[], //数据权限
+
+                addOrUpdateButtonText:'注册',
+                allCheckOperateKeyArr:[],
+                allCheckDataKeyArr:[],
+                sourcesObj:{}, //资源池页面资源对象
+                sourcesDataObj:{}, //数据资源对象
+                filterText: '', // 需要过滤节点的关键字
+
+                isHalfOperationKeyArr:[], //已经在半选中保存数据
+                isAllOperationKeyArr:[], //已经在全选中保存的数据
+                defaultTreeProps:{
+                    children: 'childrens',
+                    label: 'name',
+                    id:'key'
+                },
+
+                rAgentUrlPageEq:[
+                    {required: true, message: '该输入项为必输项'},
+                    {validator:rAgentUrlEqValidate.bind(null,'page'),trigger:'blur'}
+                ],
+                rAgentDataPageEq:[
+                    {required: true, message: '该输入项为必输项'},
+                    {validator:rDataAgentUrlEqValidate.bind(null,'data'),trigger:'blur'}
+                ],
+
+                oldrAgentUrl:'',
+                oldDatarAgentUrl:'',//数据资源地址
+                activeName:"singleForm", //page 页面资源  data 数据资源
+                tabArr:[{
+                    name:'单表资源',
+                    tabName:'singleForm',
+                    showCode:'tableViewDefineKey'
+                },{
+                    name:'列表资源',
+                    tabName:'form',
+                    showCode:'listViewDefineKey'
+                },{
+                    name:'流程资源',
+                    tabName:'flow',
+                    showCode:'flowId'
+                }],
+                methodNameArr:[
+                    {label:"添加",value:"add"},
+                    {label:"删除",value:"delete"},
+                    {label:"修改",value:"update"},
+                    {label:"查看",value:"query"}
+                ],
+
+                methodName:["add","delete","update","query"],
+                methodNameObj:{"add":"添加","delete":"删除","update":"修改","query":"查看"},
+                rRequestTypeArr:[
+                    {label:"get请求",value:"get"},
+                    {label:"post请求",value:"post"}
+                ],
+
+                fieldTypeObj:{
+                    "1": "字符串",
+                    "6": "字符串",
+                    "2": "字符串",
+                    "3": "字符串",
+                    "4": "字符串",
+                    "10": "字符串",
+                    "7": "字符串",
+                    "5":"字符串",
+                    "9":"整数"
+                },
+
+                oldMethodObj:{},
+                sourceDataIdArr:[],
+                viewData: [],
+                showTreeDialog:false,
+                loading: true,
+                clickData:{},
+            }
+        },
+        watch:{
+            'form.id'() {
+                this.addOrUpdateButtonText = '注册';
+            },
+            filterText(val){
+                this.$refs.viewRef.filter(val.trim())
+            },
+            rClassId(){
+                this.initSysRources().then(() =>{
+                    //初始化参数列表
+                    this.initFormFields();
+                });
+            },
+        },
+       created(){
+           this.initSysRources().then(() =>{
+               this.nodeClick(this.viewData[0]);
+           });
+        },
+
+        methods:{
+
+            /**
+             * 查询系统资源池
+             */
+           initSysRources(){
+                let vm = this;
+                let allResourcesArr = [];
+                vm.showTreeDialog = false;
+                vm.loading = true;
+                vm.sourcesObj = {};
+                vm.sourcesDataObj = {};
+                return new Promise(resolve => {
+                    vm.axios.post(this.api.resources.findResources).then(res => { //获取绑定资源数据
+                        if(res.data && res.data.operateObj){
+                            allResourcesArr = res.data.operateObj || [];
+                            allResourcesArr.forEach(item =>{
+                                if(item.rtype == 'data'){ //数据资源
+                                    vm.sourcesDataObj[item.rkey] = item; //数据资源一个方法保存一条 resouces 为保证 rkey一致， rkey 为 表单id +"_"+方法名
+                                }else{ //页面资源
+                                    vm.sourcesObj[item.rkey] = item;
+                                    vm.sourcesObj[item.ragentUrl] = item; // pageId存储在这里
+                                }
+                            });
+                        }
+                        vm.axios.post(vm.api.param.getSysParams,{"key":"formUrl"}).then(paramRes => {
+                            let formUrl = paramRes.data || "";
+                            vm.axios.post(formUrl + "/plFormBaseController/getResourceOperations").then(optsRes => {
+                                vm.viewData = optsRes.data || [];
+                                vm.viewData.forEach(item => {
+                                    (item.listOpts || []).forEach(optData => {
+                                        if(optData.key.indexOf("_tree") > -1){
+                                            optData.name = this.formatterTreeName(optData);
+                                        }
+                                    })
+                                })
+                                vm.showTreeDialog = true;
+                                this.$nextTick(() => {
+                                    if(this.filterText){
+                                        this.$refs.viewRef && this.$refs.viewRef.filter(this.filterText);
+                                    }
+                                })
+                                vm.loading = false;
+                                this.$forceUpdate();
+                                resolve();
+                            })
+                        })
+                    });
+                })
+            },
+
+            /**
+             * 节点筛选
+             */
+            filterNode(val,data){
+                if(!val){
+                    return true;
+                }
+                return data.label.indexOf(val) !== -1;
+            },
+
+            clearForm(){
+                this.oldrAgentUrl = '';
+                this.$set(this.form,'rMethodName',[]); //资源方法
+                this.$set(this.form,'dataExternalAccess','1');
+                this.$set(this.form,'dataRAgentUrl','');
+                this.$set(this.form,'dataRstatus','1');
+                this.$set(this.form,'rRequestType','get'); //默认get请求
+                this.$set(this.form,'rIfRestrictedParams','0'); //限制入参
+                this.$set(this.form,'rParamLists',[]); //参数列表
+                this.$set(this.form,'dataRAgentUrl',''); //置空数据资源代理地址
+                //查询节点的权限信息(按钮信息 ) 和数据权限（条件定义）
+                this.operationFormData = [];
+                this.dataPermisFormData = [];
+                this.$set(this.form,'allOptAuth',false); //操作权限
+                this.$set(this.form,'allDataAuth',false); //操作权限
+
+                this.sourceDataIdArr = [];
+            },
+
+            //选择表单视图
+            async nodeClick(data,node,tabName){
+                //获取最新资源池
+                // await this.initSysRources();
+                if(tabName != 'form' && tabName != 'flow'){
+                    this.activeName = 'singleForm';
+                }
+                this.$set(this.form,'rname',data.realName);
+                this.$set(this.form,'tableViewDefineKey',data.tableViewDefineKey);
+                this.$set(this.form,'listViewDefineKey',data.listViewDefineKey);
+                this.$set(this.form,'flowId',data.flowId);
+                this.$set(this.form,'rAgentUrl',data.pageDefineKey);
+                this.clearForm(); //清空
+
+                this.$set(this.form,'rclass',data.formName);
+                this.$set(this.form,'rclassId',data.formDefineKey);
+                this.$set(this.form,'id','');
+
+                if(tabName == "form"){
+                    this.$set(this.form,'rkey',data.listViewDefineKey);
+                    this.operationFormData = data.listOpts;
+                    this.dataPermisFormData = data.listDatas;
+                }else if(tabName == "flow"){
+                    this.$set(this.form,'rkey',data.flowId);
+                    this.operationFormData = data.flowOpts;
+                    this.dataPermisFormData = data.flowDatas;
+                }else{
+                    this.$set(this.form,'rkey',data.tableViewDefineKey);
+                    this.operationFormData = data.singleFormOpts;
+                    this.dataPermisFormData = data.singleFormDatas;
+                }
+
+                if(this.sourcesObj[this.form.rkey]){
+                    this.$set(this.form,'id',this.sourcesObj[this.form.rkey].id); //赋值id
+                }
+
+                this.operateData(data);
+
+                this.clickData = data;
+            },
+
+
+            /**
+             * 节点数据处理
+             */
+            operateData(data){
+                //默认不注册数据资源
+                this.$set(this.form,'isNeedDataSource','0'); //是否注册相关数据资源
+                //判断资源池中是否存在,如果存在初始化选
+                let defineKey;
+                if(this.activeName == "singleForm"){
+                    defineKey = data.tableViewDefineKey;
+                }else if(this.activeName == "form"){
+                    defineKey = data.listViewDefineKey;
+                }else{ // flow
+                    defineKey = data.flowId;
+                }
+                if(this.sourcesObj[defineKey]){
+                    //初始化选中操作权限和数据权限
+                    //获取止于草拟
+                    let operatePermisList; //操作权限
+                    let dataPermisList; //数据权限
+                    operatePermisList = this.sourcesObj[defineKey].operatePermisList || []; //操作权限
+                    dataPermisList = this.sourcesObj[defineKey].dataPermisList || []; //数据权限
+                    this.$nextTick(() =>{
+                        //是否启用
+                        let rstatus = "1"; //默认启用状态
+                        if(this.sourcesObj[defineKey].rstatus){
+                            rstatus = this.sourcesObj[defineKey].rstatus;
+                        }
+                        this.$set(this.form,'rstatus',rstatus);
+                        let externalAccess = "0"; //默认开启外部访问
+                        if(this.sourcesObj[defineKey].externalAccess){
+                            externalAccess = this.sourcesObj[defineKey].externalAccess;
+                        }
+                        //默认代理地址
+                        // let agentUrl = "";
+                        // if(this.sourcesObj[defineKey].ragentUrl){
+                        //     agentUrl = this.sourcesObj[defineKey].ragentUrl;
+                        // }
+                        this.$set(this.form,'rAgentUrl',data.pageDefineKey); //代理地址这里设置为表单资源的pageId
+
+                        this.$set(this.form,'externalAccess',externalAccess);
+                        this.oldrAgentUrl = this.form.rAgentUrl;
+                        let checkOperateKeys = []; //操作权限
+                        let checkDataKeys = []; //数据权限
+                        operatePermisList.forEach(item =>{
+                            checkOperateKeys.push(item.powerKey);
+                        });
+                        dataPermisList.forEach(item =>{
+                            checkDataKeys.push(item.powerKey);
+                        });
+                        this.$set(this.form,'allOptAuth',true); //操作权限
+                        this.$set(this.form,'allDataAuth',true); //数据权限
+                        //判断是否全选 当前获取当前选中的数据 checkOperateKeyArr 和树数据比较 operationFormData
+                        if(this.$refs["operatePermisRef_" + this.activeName]){ //选中操作权限
+                            this.$refs["operatePermisRef_" + this.activeName][0].setCheckedKeys(checkOperateKeys);
+                            //判断是否选中全选
+                            if(this.operationFormData.length == 0){
+                                this.$set(this.form,'allOptAuth',false); //操作权限
+                            }
+                            this.operationFormData.some(item =>{
+                                if(checkOperateKeys.indexOf(item.key) == '-1' ){
+                                    this.$set(this.form,'allOptAuth',false); //操作权限
+                                    return true;
+                                }
+                            });
+                        }
+                        if(this.$refs["dataPermisRef_" + this.activeName]){//选中数据权限
+                            this.$refs["dataPermisRef_" + this.activeName][0].setCheckedKeys(checkDataKeys);
+                            //判断是否全选
+                            if(this.dataPermisFormData.length == 0){
+                                this.$set(this.form,'allDataAuth',false); //操作权限
+                            }
+                            this.dataPermisFormData.some(item =>{
+                                if(checkDataKeys.indexOf(item.key) == '-1' ){
+                                    this.$set(this.form,'allDataAuth',false); //操作权限
+                                    return true;
+                                }
+                            });
+                        }
+                    });
+
+                }else{
+                    //初始化默认值
+                    //是否启用
+                    this.$set(this.form,'rstatus',"1");
+                    this.$set(this.form,'externalAccess',"0");
+                    // this.$set(this.form,'rAgentUrl','');
+                    this.oldrAgentUrl = "";
+                }
+            },
+
+            /**
+             * 初始化树选中
+             */
+            initTreeCheck(dataArr,keysArr){
+                (dataArr || []).forEach(item =>{
+                    if(!item["childrens"]){ //因为下级全部选中上级自动选中，所以不用考虑上级
+                        // this.$refs["operatePermisRef_" + this.activeName][0].setCheckedKeys([item['key']]);
+                        if(item['enable']){ //当前已选择
+                            keysArr.push(item['key']);
+                        }
+                    }
+                    if(item["childrens"]){
+                        this.initTreeCheck(item["childrens"],keysArr);
+                    }
+                })
+            },
+
+
+            handleCheckChange(data, checked, indeterminate) {
+
+            },
+
+
+            renderContent(h, { node, data, store }) {
+                let showText = node.label;
+                if(showText.length > 16){
+                    showText = showText.substr(0,16) + "...";
+                }
+                if(!this.isEmptyObject(this.sourcesObj) && this.sourcesObj[data.pageDefineKey] ){
+                        return (
+                            <span class="custom-tree-node">
+                    <span title={node.label}>{showText}</span>
+                    <span class="custom-tree-node-icon">
+                        <i class="el-icon-check"></i>
+                    </span>
+                  </span>);
+
+                }else{
+                    return (
+                        <span class="custom-tree-node">
+                       <span title={node.label}>{showText}</span>
+                </span>);
+                }
+            },
+
+            /**
+             * 操作权限全选
+             */
+            optChange(val){
+                //全选或取消全选
+                if(val){
+                    //全部勾选
+                    this.$refs["operatePermisRef_" + this.activeName][0].setCheckedNodes(this.operationFormData);
+                }else{
+                    //取消全部勾选
+                    this.$refs["operatePermisRef_" + this.activeName][0].setCheckedNodes([]);
+                }
+            },
+
+            /**
+             * 数据权限全选
+             */
+            dataChange(val){
+                //全选或取消全选
+                if(val){
+                    //全部勾选
+                    this.$refs["dataPermisRef_" + this.activeName][0].setCheckedNodes(this.dataPermisFormData);
+                }else{
+                    //取消全部勾选
+                    this.$refs["dataPermisRef_" + this.activeName][0].setCheckedNodes([]);
+                }
+            },
+
+            /**
+             * 操作权限点击事件
+             * @param data
+             * @param checked
+             */
+            checkeOptChangeFnc(data,checked){
+                this.$set(this.form,'allOptAuth',true); //操作权限
+                let keysArr = this.$refs["operatePermisRef_" + this.activeName][0].getCheckedKeys();
+                this.operationFormData.some(item =>{
+                    if(keysArr.indexOf(item.key) == '-1' ){
+                        this.$set(this.form,'allOptAuth',false); //操作权限
+                        return true;
+                    }
+                });
+
+            },
+
+            /**
+             * 数据全选点击全选判断
+             * @param data
+             * @param checked
+             */
+            checkeDataChangeFnc(data,checked){
+                this.$set(this.form,'allDataAuth',true); //数据权限
+                //获取半选
+                let keysArr = this.$refs["dataPermisRef_" + this.activeName][0].getCheckedKeys();
+                this.dataPermisFormData.some(item =>{
+                    if(keysArr.indexOf(item.key) == '-1' ){
+                        this.$set(this.form,'allDataAuth',false); //操作权限
+                        return true;
+                    }
+                });
+            },
+
+            //注册或更新到资源池
+            saveOrUpdate(){
+                let vm = this;
+                let resourceConfigRef = this.$refs.resourceConfigRef;
+                //校验资源权限
+                // let dataSourcesFormRef = this.$refs.dataSourcesFormRef;
+                //更新当前 oldAgntUrl
+                this.oldrAgentUrl = this.form.rAgentUrl || '';
+                this.oldDatarAgentUrl = this.form.dataRAgentUrl || '';
+
+                resourceConfigRef.validate(valid =>{
+                    if(!valid){
+                        this.$message({
+                            type: 'warning',
+                            message: "当前页面资源信息未完善"
+                        });
+                        return;
+                    }else {
+                        // if(dataSourcesFormRef && this.form.isNeedDataSource == '1'){
+                        //     dataSourcesFormRef.validate(valid2 =>{ //数据资源验证
+                        //         if(!valid2){
+                        //             this.$message({
+                        //                 type: 'warning',
+                        //                 message: "当前数据资源信息未完善"
+                        //             });
+                        //         }else {
+                        //             this.executeSaveResouce();
+                        //         }
+                        //     });
+                        // }else {
+                        //     this.executeSaveResouce();
+                        // }
+                        this.executeSaveResouce();
+                    }
+                });
+
+            },
+
+            /**
+             * 执行保存
+             */
+          async  executeSaveResouce(){
+                let vm = this;
+                let rSource = this.activeName; //单表表单、列表、工作流
+                //操作权限
+                //数据权限
+                let optArr = []; //保存的操作权限
+                let dataArr = []; //保存的数据权限
+                this.sourceDataIdArr = []; //清空
+
+                //计算保存的数据权限和操作权限
+                //获取选中的操作权限
+                let checkOperateNodesArr = this.$refs["operatePermisRef_" + this.activeName][0].getCheckedNodes();
+                let checkDataNodesArr = this.$refs["dataPermisRef_" + this.activeName][0].getCheckedNodes();
+                //获取选中的数据权限
+                checkOperateNodesArr.forEach(item =>{
+                    optArr.push({
+                        'type':'opt',
+                        'powerCode':item.key,
+                        'powerName':item.name,
+                        'powerKey':item.key,
+                        'parentId':'-1',
+                        'parentTree':'-1',
+                    })
+                });
+                checkDataNodesArr.forEach(item =>{
+                    dataArr.push({
+                        'type':'data',
+                        'powerCode':item.key,
+                        'powerName':item.name,
+                        'powerKey':item.key,
+                        'parentId':'-1',
+                        'parentTree':'-1',
+                    })
+                });
+                let resourceParam = {
+                    rType: this.form.externalAccess == '1'? 'page': 'menu', //url页面资源
+                    rName : this.form.rname, //功能名称
+                    rKey : this.form.rkey, //唯一
+                    externalAccess:this.form.externalAccess,
+                    rAgentUrl:this.form.rAgentUrl,
+                    noLoginRequired:'0',//默认不需要登录
+                    passSwitch: '0',
+                    rSource: rSource, //资源类型 复合视图
+                    rClass: this.form.rclass,
+                    rClassId: this.form.rclassId,
+                    operatePermis: JSON.stringify(optArr || []), //操作权限
+                    dataPermis: JSON.stringify(dataArr || []), //数据权限
+                    rStatus:this.form.rstatus
+                }
+
+                //保存后重新刷新资源池
+                let res = await  this.axios.post(this.api.resources.saveResources, resourceParam);
+                vm.$message({
+                        duration: 1000,
+                        type: 'success',
+                        message:  this.addOrUpdateButtonText+'成功！'
+                    }
+                );
+                if(res.data.operateObj){
+                    this.$nextTick(()=>{
+                        this.form.id = res.data.operateObj.id; //更新当前formId
+                    });
+                    // //如果存在数据资源，保存数据资源
+                    //
+                    // let keysArr = Object.keys(this.oldMethodObj );
+                    // //注册or更新到资源池
+                    // if(this.form.isNeedDataSource == '0'){
+                    //     this.form.rMethodName = []
+                    // }
+                    // let updateResouce = keysArr.filter(val=> { return (this.form.rMethodName || []).indexOf(val) > -1 }); //需要更新的
+                    // // 差集 数组arr1相对于arr2所没有的
+                    // let addResouce = (this.form.rMethodName || []).filter(val => { return keysArr.indexOf(val) === -1 }); //需要新增的
+                    // let deleteResouce = (keysArr || []).filter(val => { return (this.form.rMethodName || []).indexOf(val) === -1 }); //需要删除的
+                    //
+                    // //保存更新  oldMethodObj  this.oldMethodObj[key] = this.sourcesDataObj[data.id+"_"+key].id;
+                    // // this.oldMethodObj = {};
+                    // let newObjMethodObj = {};
+                    // for(let addKey of (addResouce || [])){ //需要新增的
+                    //     let addResouceData = {
+                    //         rType: 'data', //url页面资源
+                    //         rName : this.form.rname + "(" +this.methodNameObj[addKey]+"）", //功能名称
+                    //         rKey : this.form.rkey + "_" +addKey, //唯一key
+                    //         externalAccess:this.form.dataExternalAccess || '1',
+                    //         rMethodName:this.methodNameObj[addKey], //资源名
+                    //         rAgentUrl:this.form.dataRAgentUrl || '',
+                    //         noLoginRequired:'0',//默认不需要登录
+                    //         rIfRestrictedParams:this.form.rIfRestrictedParams || '0', //限制入参
+                    //         passSwitch: '0',
+                    //         rSource: rSource, //资源类型 复合视图
+                    //         rClass: this.form.rclass,
+                    //         rClassId: this.form.rclassId,
+                    //         rDataReqType:addKey, //请求方式
+                    //         rRequestType:this.form.rRequestType, //请求方式
+                    //         rParamLists:JSON.stringify(this.form.rParamLists || []), //参数列表
+                    //         rStatus:this.form.dataRstatus || '1',
+                    //     }
+                    //     let res = await this.axios.post(this.api.resources.add,addResouceData);
+                    //     if(res.data.operateObj){
+                    //         this.$set(this.form,'dataId',res.data.operateObj.id);
+                    //         this.sourceDataIdArr.push(res.data.operateObj.id);
+                    //         // this.oldMethodObj[addKey] = res.data.operateObj.id;
+                    //         newObjMethodObj[addKey] = res.data.operateObj.id;
+                    //     }
+                    // }
+                    // for(let addKey of  (updateResouce || [])){ //需要更新的
+                    //     let updateResouceData = {
+                    //         id: this.oldMethodObj[addKey],
+                    //         rType: 'data', //url页面资源
+                    //         rName : this.form.rname + "(" +this.methodNameObj[addKey]+"）", //功能名称
+                    //         rKey : this.form.rkey + "_" +addKey, //唯一key
+                    //         externalAccess:this.form.dataExternalAccess || '1',
+                    //         rMethodName:this.methodNameObj[addKey], //资源名
+                    //         rAgentUrl:this.form.dataRAgentUrl || '',
+                    //         noLoginRequired:'0',//默认不需要登录
+                    //         rIfRestrictedParams:this.form.rIfRestrictedParams || '0', //限制入参
+                    //         passSwitch: '0',
+                    //         rSource: rSource, //资源类型 复合视图
+                    //         rClass: this.form.rclass,
+                    //         rClassId: this.form.rclassId,
+                    //         rDataReqType:addKey, //请求方式
+                    //         rRequestType:this.form.rRequestType, //请求方式
+                    //         rParamLists:JSON.stringify(this.form.rParamLists || []), //参数列表
+                    //         rStatus:this.form.dataRstatus || '1',
+                    //     }
+                    //      let res = await this.axios.post(this.api.resources.update,updateResouceData);
+                    //      if(res.data.operateObj){
+                    //         this.$set(this.form,'dataId',res.data.operateObj.id);
+                    //         // this.oldMethodObj[addKey] = res.data.operateObj.id; //更新 oldMethodObj
+                    //          newObjMethodObj[addKey] = res.data.operateObj.id;
+                    //
+                    //          this.sourceDataIdArr.push(res.data.operateObj.id);
+                    //      }
+                    // }
+                    //
+                    // let deletIds = [];
+                    // (deleteResouce || []).forEach(item =>{
+                    //     deletIds.push(this.oldMethodObj[item]);
+                    // });
+                    // if(deletIds.length > 0){
+                    //     await this.axios.post(this.api.resources.delete,{ids:deletIds.join(",")}); //删除
+                    // }
+                    // this.oldMethodObj = JSON.parse(JSON.stringify(newObjMethodObj)); //赋值上次选中
+                    // //重新加载资源池
+                    this.$emit('initResourceData'); // 重新加载资源池左侧树
+                    this.initSysRources();
+                }
+
+            },
+
+
+            /**
+             * 保存数据权限和操作权限树
+             */
+            saveOptAndData(submitObj){
+                let vm = this;
+                //计算所有选中的数据权限和操作权限
+                let checkeOpertionArr = []; //全选操作权限
+                let halfOperatArr = []; //半选操作权限
+                let checkDataArr = [];
+                let halfCheckArr = [];//半选数据权限
+                if(vm.$refs["operatePermisRef_" + this.activeName]){
+                    this.isHalfOperationKeyArr = [];
+                    this.isAllOperationKeyArr = [];
+                    checkeOpertionArr = vm.$refs["operatePermisRef_" + this.activeName][0].getCheckedNodes(); //全选
+                    halfOperatArr = vm.$refs["operatePermisRef_" + this.activeName][0].getHalfCheckedNodes(); //获取半选
+                    let keyOperateArr = vm.$refs["operatePermisRef_" + this.activeName][0].getCheckedKeys(); //获取当前完全勾选的节点
+
+                    let copyCheckeOpertionArr = JSON.parse(JSON.stringify(checkeOpertionArr || []));
+                    let copyHalfOperatArr = JSON.parse(JSON.stringify(halfOperatArr || []));
+                    let copyKeyOperateArr = JSON.parse(JSON.stringify(keyOperateArr));
+
+                    this.deleteAllCheckOpertion(copyCheckeOpertionArr,copyKeyOperateArr);
+                    //循环半选的
+                    this.disabelHalNoUseData(copyHalfOperatArr,copyKeyOperateArr);
+                    let allOperateData =  copyCheckeOpertionArr.concat(copyHalfOperatArr);
+                    allOperateData = this.filterIsHalfOperation(allOperateData,this.isHalfOperationKeyArr,this.isAllOperationKeyArr);
+                    submitObj["operatePermis"] = allOperateData;
+                    //递归过滤 isHalfOperationKeyArr
+                }
+
+                if(vm.$refs["dataPermisRef_" + this.activeName]){
+                    this.isHalfOperationKeyArr = []; //
+                    this.isAllOperationKeyArr = [];
+                    checkDataArr = vm.$refs["dataPermisRef_" + this.activeName][0].getCheckedNodes();
+                    halfCheckArr = vm.$refs["dataPermisRef_" + this.activeName][0].getHalfCheckedNodes(); //获取半选
+                    let keyDataArr = vm.$refs["operatePermisRef_" + this.activeName][0].getCheckedKeys(); //获取当前完全勾选的节点
+                    let copyCheckDataArr = JSON.parse(JSON.stringify(checkDataArr || []));
+                    let copyHalfCheckArr = JSON.parse(JSON.stringify(halfCheckArr || []));
+                    let copyKeyDataArr = JSON.parse(JSON.stringify(keyDataArr));
+                    this.deleteAllCheckOpertion(copyCheckDataArr,copyKeyDataArr);
+                    this.disabelHalNoUseData(copyHalfCheckArr,copyKeyDataArr);
+                    let allData =  copyCheckDataArr.concat(copyHalfCheckArr);
+                    allData = this.filterIsHalfOperation(allData,this.isHalfOperationKeyArr,this.isAllOperationKeyArr);
+                    submitObj["dataPermis"] = allData;
+                }
+                //数据权限 和操作权限
+                if(submitObj['operatePermis'] && typeof submitObj["operatePermis"] == "object"){
+                    submitObj["operatePermis"] = JSON.stringify(submitObj["operatePermis"]);
+                }
+                if(submitObj['dataPermis'] && typeof submitObj["dataPermis"] == "object"){
+                    submitObj["dataPermis"] = JSON.stringify(submitObj["dataPermis"]);
+                }
+            },
+
+
+            /**
+             *  删除已经子数据
+             * @param allCheckArr
+             * @param keyArr
+             */
+            deleteAllCheckOpertion(allArr,keyArr){
+                allArr.forEach(item =>{
+                    this.$set(item,'enable',true); //默认节点可用
+                    if(item["childrens"]){
+                        (item["childrens"] || []).forEach((child,index) =>{
+                            if(keyArr.indexOf(child.key) > -1){ //删除当前数据
+                                this.isAllOperationKeyArr.push(child.key);
+                            }
+                            allArr = item["childrens"];
+                            this.deleteAllCheckOpertion(allArr,keyArr);
+                        })
+                    }
+                });
+            },
+
+            /**
+             * 递归半选中无用数据
+             * @param halfOperatArr
+             * @param keyArr
+             */
+            disabelHalNoUseData(halfOperatArr,keyArr){
+                halfOperatArr.forEach(item =>{
+                    if(item["childrens"]){
+                        (item["childrens"] || []).forEach((child,index) =>{
+                            if(keyArr.indexOf(child.key) == -1){ //设置当前节点 isCheked：false
+                                // this.$set(child,'enable',false); //设置节点为不可用状态
+                                item["childrens"].splice(index,1);
+                                keyArr.splice(index,1);
+                            }else{
+                                this.$set(child,'enable',true); ;//设置可编辑状态
+                                this.isHalfOperationKeyArr.push(child.key);
+                            }
+                            halfOperatArr = item["childrens"];
+                            this.disabelHalNoUseData(halfOperatArr,keyArr);
+                        })
+                    }
+                });
+            },
+
+            /**
+             * 过滤全选数据
+             */
+            filterIsHalfOperation(checkeOpertionArr,isHalfOperationKeyArr,isAllOperationKey){
+                checkeOpertionArr = checkeOpertionArr.filter(item =>{
+                    return isHalfOperationKeyArr.indexOf(item.key) == -1 &&  isAllOperationKey.indexOf(item.key) == -1;
+                });
+
+                return checkeOpertionArr;
+            },
+
+
+            /**
+             * 切换是否外部启用
+             * @param val
+             */
+            changeExternal(val){
+                if(val == '0'){
+                    this.$set(this.form,'rAgentUrl','');
+                }
+            },
+
+            changeDataExternal(val){
+                this.$set(this.form,'dataRAgentUrl','');
+            },
+
+            /**
+             * 切换数据资源开关
+             */
+            chanegDataSource(val){
+                if(val == '0'){
+                    this.activeName = 'page'; //强制跳转到页面资源
+                }
+            },
+
+            handleClick(tab, event){
+
+            },
+
+
+            /**
+             * 新增参数列表
+             */
+            addRParamLists(){
+                this.$refs.dataSourcesFormRef.validate(valid => {
+                    if (!valid) {
+                        return;
+                    }
+                    //新增
+                    this.form.rParamLists.push({
+                        id: '',
+                        chfieldName: '',
+                        fieldName:'',
+                        fieldType:'',
+                        key:this.COMMON_FUNC.getUuidByParams(16)
+                    })
+                });
+            },
+
+            /**
+             * 删除参数列表
+             */
+            removeRParamLists(){
+                //获取选中
+                let selection = this.$refs.rParamListsRef.selection;
+                if((selection|| []).length == 0){
+                    vm.$message({
+                        duration: 1500,
+                        type: 'info',
+                        message: '请至少选择一条需要删除的数据！'
+                    });
+                    return;
+                }
+                let deletKeyArr = [];
+                selection .forEach(item =>{
+                    deletKeyArr.push(item.key);
+                });
+                this.form.rParamLists = this.form.rParamLists.filter(item =>{
+                    return deletKeyArr.indexOf(item.key) == -1;
+                });
+            },
+
+            /**
+             * 判断obj对象是否为空
+             * @param obj
+             * @returns {boolean}
+             */
+            isEmptyObject(obj) {
+                for (let key in obj){
+                    if (obj.hasOwnProperty(key)) {
+                        return false;//返回false，不为空对象
+                    }
+                }
+                return true;//返回true，为空对象
+            },
+
+            renderOperateContent(h, { node, data, store }) {
+                let type = "按钮";
+                if(node.key.indexOf("tree") > -1){
+                    type = "树"
+                }
+                return (
+                    <span >
+                    <span>{node.label}</span>
+                    <span class="custom-operate-tree-node">
+                      ({type})
+                    </span>
+                  </span>);
+            },
+
+            /**
+             * 格式化树视图名称
+             * @param row
+             * @returns {string}
+             */
+            formatterTreeName(row){
+                let name = "";
+                if(row.treeName){
+                    let treeSort = row.treeSort || [];
+                    let maxIndex = treeSort.length - 1;
+                    treeSort.forEach((item,index) =>{
+                        if(index < maxIndex){
+                            name  += item.chfieldName + "-->";
+                        }else{
+                            name += item.chfieldName;
+                        }
+                    });
+                }
+                return name;
+            },
+
+            tabClick(tab){
+                if(tab.name == "form"){
+                    this.nodeClick(this.clickData,{},'form');
+                }else if(tab.name == "flow"){
+                    this.nodeClick(this.clickData,{},'flow');
+                }else{
+                    this.nodeClick(this.clickData,{});
+                }
+            }
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    .asideTree {
+        overflow-y: auto;
+        width: 100% !important;
+        height: calc(100% - 90px);
+        position: relative;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+    }
+
+    .p-asideTree{
+        border: 1px solid #cccccc;
+    }
+
+    .p-asideTree /deep/ .el-tree-node.is-current > .el-tree-node__content {
+        background-color: #75cafb !important;
+        color: white;
+    }
+    .p-asideTree /deep/ .el-checkbox__input.is-checked+.el-checkbox__label {
+        color: black;
+    }
+
+    .asideTree /deep/ .el-tree > .el-tree-node > .el-tree-node__content { /* 选中第一级菜单 */
+        background-color: #1A598A;
+        text-decoration: none;
+        border: 1px silver solid;
+        color: #fff;
+        text-align: center;
+        height: 35px;
+    }
+
+    .asideTree /deep/ .custom-tree-node-icon{
+        margin-left: 5px;
+        font-weight: bold;
+        color: #4c8bff;
+        font-size: 16px;
+    }
+
+    .box-card-class{
+        width: 350px;
+        height: 250px;
+        overflow-y: auto;
+        padding-bottom: 10px;
+    }
+    .clearfix{
+        width: 280px;
+    }
+    .tree {
+        overflow-y:auto;
+        height: 150px;
+    }
+    .tree  /deep/ .el-tree {
+        　　.el-tree-node__content {
+            　　　　display: block !important;
+        }
+        　　.el-tree-node__children {
+            　　　　overflow: visible !important;
+        }
+
+    }
+
+    .resouceConfigClass /deep/ .el-card__header{
+        padding: 10px 20px;
+    }
+
+    /deep/.custom-operate-tree-node {
+        margin-left: 10px;
+        font-size: 11px;
+        color: #409EFF;
+    }
+
+</style>