sasp-admin 0.2.57

package/src/views/threeinone/safeSpvEconView.vue

@@ -0,0 +1,569 @@
+<template>
+    <el-container style="width: 100%;height: 100%;" v-if="roleFlag">
+        <!--左侧树 start-->
+        <el-aside width="240px">
+            <safe-spv-left-tree
+                    ref="safeSpvTreeRef"
+                    :source="source"
+                    :spvTitle="spvTitle"
+                    :showTree="showTree"
+                    :spvTreeDataArr="spvTreeDataArr"
+                    :currentNodeKey="currentNodeKey"
+                    :defaultProps="defaultProps"
+                    :isEdit="isEdit"
+                    @nodeClick="nodeClick"
+                    :open-safe-spv-dialog="openSafeSpvDialog"
+                    :remove-safe-spv="removeSafeSpv">
+            </safe-spv-left-tree>
+        </el-aside>
+        <!--左侧树 start-->
+        <!--中间 所属行业 start-->
+        <el-container class="econ-container">
+            <safe-spv-main
+                    ref="safeSpvEconMain"
+                    :safe-spv-info="safeSpvInfo"
+                    :currentClickSpv="currentClickSpv"
+                    :econDataArr="econDataArr"
+                    :checkedEconObj="checkedEconObj"
+                    :showBtn="showBtn"
+                    :spvTreeDataArr="spvTreeDataArr"
+                    :source="source"
+                    :isEdit="isEdit"
+                    :isDisabled="isDisabled"
+                    :checkboxIsView="checkboxIsView"
+                    @changeEdit="changeEdit"
+                    @nodeClick="nodeClick"
+                    @getSafeSpvData="getSafeSpvData"
+                    :refreshEconSet="refreshEconSet"
+                    :check-econ="checkEcon"
+                    :changeFromOpenPerson="changeFromOpenPerson">
+            </safe-spv-main>
+        </el-container>
+        <!--中间 所属行业 start-->
+
+        <!--右侧 快速导航 start-->
+        <el-aside width="240px">
+            <!--<el-button @click="test()">erer</el-button>-->
+            <!--标题 start-->
+            <el-header class="title-header" height="30px">
+                <span> 所属行业导航</span>
+            </el-header>
+            <!--标题 end-->
+            <div v-for="econData in econDataArr" :key="econData.id" class="navigation-div" @click="location(econData.id)">
+                {{econData.text}}
+            </div>
+        </el-aside>
+        <!--右侧 快速导航 start-->
+
+
+        <!--监管行业维护信息 start-->
+        <el-dialog :close-on-click-modal=false :title="safeSpvTitle" width="40%" height="50%" top="10vh"
+                   :visible.sync="safeSpvDialog" append-to-body>
+            <el-form :model="safeSpvForm" size="small" ref="safeSpvFormRef" label-width="100px">
+                <el-form-item label="监管行业名称" prop="name">
+                    <el-input type="textarea" :rows="3" v-model="safeSpvForm.name"></el-input>
+                </el-form-item>
+                <el-form-item label="监管行业排行" prop="spvOrder">
+                    <el-input-number v-model="safeSpvForm.spvOrder"></el-input-number>
+                </el-form-item>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="submitSpvForm()" size="small">保存</el-button>
+                <el-button @click="safeSpvDialog = false" size="small">取消</el-button>
+            </div>
+        </el-dialog>
+        <!--监管行业维护信息 end-->
+    </el-container>
+</template>
+
+<script>
+    import SafeSpvLeftTree from "./safeSpv/safeSpvLeftTree";
+    import SafeSpvMain from "./safeSpv/safeSpvMain";
+    export default {
+        name: "safeSpvEconView",
+        components: {SafeSpvMain, SafeSpvLeftTree},
+        props:{
+            safeSpvInfo:{type:Object,default:() => {return {};}},//地区监管信息（外层列表行数据）
+            source:{type:String,default:"1"},//来源，1-修改系统默认监管配置
+            defaultRegionId:{type:String,default:""},//默认
+            econDataArr:{type:Array,default:() => {return [];}},//所属行业元数据
+            econDataObj:{type:Object,default:() => {return {};}},//所属行业元数据第一层对应的第四层数据
+            refreshEconSet:{type:Function,default:null},
+            econOneToMany:{type:String,default:"N"},//一对多开关
+            fromOpenPerson:{type:Boolean,default:false},//来自于开启个性化
+            changeFromOpenPerson:{type:Function,default:null},
+        },
+        data(){
+            return {
+                roleFlag:true,//访问权限
+                message:"",//无访问权限时的描述文字
+                spvTitle:"",//左侧树标题
+                showBtn:{
+                    save:false,
+                    personalize:false,//开启个性化监管
+                    reduction:false,//还原为默认配置
+                    edit:false,//修改
+                },
+                showTree:false,
+                currentClickSpv:{},//当前点击的监管行业
+                currentNodeKey:"",//默认点击的监管行业
+                econFourLevelObj:{},//最后一层数据
+                checkedEconObj:{},//选中的所属行业
+                spvTreeDataArr:[],//监管行业配置左侧树数据
+                defaultProps:{"children":"children","label":"name"},//树数据显示配置
+                econSwitch:false,//所属行业监管行业一对多的开关
+                currentNodeOwnEconId:[],//当前点击的节点已经保存于数据库内所属行业
+                econSelected:[],
+                isEdit:false,
+                savedSpvEconObj:{},//监管行业已保存的所属行业
+                checkboxIsView:false,
+                safeSpvTitle:"",//监管行业维护弹出框标题
+                safeSpvDialog:false,
+                safeSpvForm:{},//监管行业表单信息
+            }
+        },
+        created(){
+           /* this.safeSpvInfo.id = "520df5cb84164198b6f6e9ed6d5e5553";
+            this.safeSpvInfo.regionTier = "1";
+            this.safeSpvInfo.regionOrder = "0";
+            this.safeSpvInfo.isOpen = "0";
+            this.safeSpvInfo.openStatus = "0";
+            this.safeSpvInfo.econOneToMany = "N";*/
+
+            this.getSafeSpvData();
+            this.initSpv();
+            this.isView();
+        },
+
+        watch:{
+            source(){
+                this.isView();
+            },
+
+            isEdit(){
+                this.isView();
+            },
+
+            fromOpenPerson(){
+                if(this.fromOpenPerson){
+                    this.changeEdit(true);
+                }
+            }
+        },
+
+        methods:{
+            test(){
+                console.log(this.checkedEconObj);
+            },
+
+            initSpv(){
+                //无权限
+                if(this.safeSpvInfo.regionTier == "4"){
+                    this.roleFlag = false;
+                    this.message = "街道用户无地区监管配置的权限，已沿用区县监管配置！";
+                    return;
+                }
+                if(this.source != "1" && (!this.safeSpvInfo || !this.safeSpvInfo.id)){
+                    this.roleFlag = false;
+                    this.message = "未找到当前账号所属的监管地区！！";
+                    return;
+                }
+
+                if(this.fromOpenPerson){
+                    this.isEdit = true;
+                }
+
+                //左侧树标题
+                if(this.source == "1"){
+                    this.spvTitle = "“默认”";
+                    this.$set(this.showBtn,"save",true);
+                }else if(this.safeSpvInfo.isOpen == "1" && this.safeSpvInfo.openStatus == '1'){//开启个性化按钮
+                    this.spvTitle = "“使用默认配置”";
+                    this.$set(this.showBtn,"personalize",true);
+                }else if(this.safeSpvInfo.isOpen == "1" && this.safeSpvInfo.openStatus == '9'){//开启默认配置、修改按钮
+                    this.spvTitle = "“使用个性化配置”";
+                    if(this.isEdit){
+                        this.$set(this.showBtn,"return",true);
+                        this.$set(this.showBtn,"save",true);
+                    }else{
+                        this.$set(this.showBtn,"reduction",true);
+                        this.$set(this.showBtn,"edit",true);
+                    }
+                }else if(this.safeSpvInfo.isOpen == "0"){//默认配置
+                    this.spvTitle = "“使用默认配置”";
+                }
+
+                //获取一对多开关
+                this.econSwitch = (this.econOneToMany != 'N');
+            },
+
+            /**
+             * 获取默认配置及左侧树数据
+             * */
+            async getSafeSpvData(){
+                this.showTree = false;
+                let regionId = this.defaultRegionId;
+                if(this.safeSpvInfo.openStatus == "9"){
+                    regionId = this.safeSpvInfo.id;
+                }
+                let treeRes = await this.axios.post(this.api.safeSpv.findAndCount,{order:"TB.SPV_ORDER ASC",regionId:regionId,countSql:"1"});
+                if(treeRes && treeRes.data && (treeRes.data || []).length > 0){
+                    let treeData = treeRes.data;
+                    //整理树数据
+                    let paramSetting = {};
+                    paramSetting["id"] = "id";
+                    paramSetting["pId"] = "parentId";
+                    paramSetting["children"] = this.defaultProps["children"]; // 设置children可配置
+                    this.spvTreeDataArr = this.COMMON_FUNC.buildElTree(treeData, paramSetting);
+                    if(this.spvTreeDataArr && this.spvTreeDataArr.length > 0){
+                        //默认选中第一大类下的第一条数据
+                        let oneChildren = this.spvTreeDataArr[0].children || [];
+                        if(oneChildren.length > 0){
+                            let defaultNode = oneChildren[0] || {};
+                            this.currentNodeKey = defaultNode.id;
+                            //当前点击的节点
+                            this.currentClickSpv = defaultNode;
+                            this.nodeClick(defaultNode);
+                        }
+                        this.showTree = true;
+                    }
+                }
+            },
+
+            /**
+             * 点击节点的回调
+             */
+             nodeClick(data, node){
+                this.checkedEconObj = {};
+                this.currentNodeOwnEconId = [];
+
+                this.currentClickSpv = data;
+
+                //勾选保存的
+                this.axios.post(this.api.safeSpvEcon.find,{spvId:data.id,joinData:"1"}).then(ownRes => {
+                    if(ownRes && ownRes.data){
+                        (ownRes.data || []).forEach(safeSpvEcon => {
+                            this.$set(this.checkedEconObj,safeSpvEcon.econId,true);
+                            this.currentNodeOwnEconId.push(safeSpvEcon.econId);
+                        });
+                    }
+                });
+
+                //置灰被其他监管行业选择的所属行业
+                if((this.source == "1" || this.isEdit) && !this.econSwitch){
+                    this.axios.post(this.api.safeSpvEcon.getEconSelected,{regionId:this.defaultRegionId}).then(otherSelectedRes => {
+                        if(otherSelectedRes && otherSelectedRes.data){
+                            this.econSelected = otherSelectedRes.data || [];
+                        }
+                    });
+                }
+            },
+
+            /**
+             *全选
+             * @param econId
+             */
+            checkEcon(econId){
+                let result = false;
+                if (this.checkedEconObj[econId]){
+                    result = true;
+                }
+                (this.econDataObj[econId] || []).forEach(econData => {
+                    if(this.currentNodeOwnEconId.indexOf(econData.id) == -1){
+                        this.$set(this.checkedEconObj,econData.id,result);
+                    }
+                });
+            },
+
+            /**
+             * checkbox是否可选
+             * @param econId
+             * @returns {boolean}
+             */
+            isDisabled(econId){
+               return (this.currentNodeOwnEconId.indexOf(econId) == -1) && (this.econSelected.indexOf(econId) != -1);
+            },
+
+            isView(){
+                this.checkboxIsView = ((this.source != "1") && (!this.isEdit));
+            },
+
+            changeEdit(value){
+                this.isEdit = value;
+            },
+
+            /**
+             * 快速定位
+             */
+            location(id){
+                let $dom = this.$refs.safeSpvEconMain.$refs["econTitle_" + id][0];
+                $dom.scrollIntoView();
+                $($dom).css("background-color","red");
+                setTimeout(()=>{
+                    $($dom).css("background-color","rgb(52, 152, 219)");
+                },1500);
+            },
+
+            /**
+             * 配置监管行业
+             * @param command
+             */
+            openSafeSpvDialog(command){
+                this.$set(this.safeSpvForm,"spvOrder",1);
+                this.$set(this.safeSpvForm,"regionId",this.safeSpvInfo.id || this.defaultRegionId);
+                if(command == "1"){
+                    this.$set(this.safeSpvForm,"name","");
+                    this.$set(this.safeSpvForm,"parentId",this.currentClickSpv.parentId);
+                    if(!this.safeSpvForm.parentId){
+                        this.$set(this.safeSpvForm,"parentId","-1");
+                    }
+                    this.safeSpvTitle = "添加同级监管行业";
+                }else if(command == "2"){
+                    this.$set(this.safeSpvForm,"name","");
+                    if(this.currentClickSpv.parentId != -1){
+                        this.$message({message:"监管行业最多允许配置两级！",type:"error"});
+                        return;
+                    }
+                    this.$set(this.safeSpvForm,"parentId",this.currentClickSpv.id);
+                    this.safeSpvTitle = "添加下级监管行业";
+                }else if(command == "edit"){
+                    this.safeSpvForm = this.currentClickSpv;
+                    this.safeSpvTitle = "修改监管行业";
+                }
+                this.safeSpvDialog = true;
+            },
+
+            /**
+             * 保存监管行业信息
+             */
+            submitSpvForm(){
+                this.$refs.safeSpvFormRef.validate((valid) => {
+                    if(!valid){
+                        return;
+                    }
+                    let loading = this.$loading({
+                        lock: true,
+                        text: '正在保存，请稍后....',
+                        spinner: 'el-icon-loading',
+                        background: 'rgba(0, 0, 0, 0.7)'
+                    });
+                    let url = this.api.safeSpv.add;
+                    if(this.safeSpvForm.id){
+                        url = this.api.safeSpv.update;
+                    }
+                    this.axios.post(url,this.safeSpvForm).then(res => {
+                        if(res && res.data && res.data.operateSuccess){
+                            this.$message({message:"保存成功！",type:"success"});
+                            this.safeSpvDialog = false;
+                            this.getSafeSpvData();
+                        }else{
+                            this.$message({message:"保存失败！",type:"error"});
+                        }
+                        loading && loading.close();
+                    });
+                });
+            },
+
+            /**
+             * 删除监管行业信息
+             */
+            removeSafeSpv(){
+                let spvTreeRef = this.$refs.safeSpvTreeRef.$refs.spvTreeRef;
+                let checkNode = (spvTreeRef && spvTreeRef.getCheckedKeys()) || [];
+                if(checkNode.length == 0){
+                    this.$message({message:"请勾选需要删除的监管行业！",type:"warning"});
+                    return;
+                }
+                let msg = "是否确定删除选中的" + checkNode.length + "个监管行业(此监管行业设置与安委会成员单位和所属行业之间配置信息会级联删除)！";
+                this.$confirm(msg, '提示', {
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                    type: 'warning'
+                }).then(() => {
+                    this.axios.post(this.api.safeSpv.delete,{ids:checkNode.join(",")}).then(res => {
+                       if(res && res.data && res.data.operateSuccess){
+                           this.$message({message:"删除成功！",type:"success"});
+                           this.getSafeSpvData();
+                       } else{
+                           this.$message({message:"删除失败！",type:"error"});
+                       }
+                    });
+                });
+            }
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    .el-aside {
+        border:1px solid #cccccc;
+    }
+    .econ-container {
+        border: 1px solid #cccccc;
+        margin-left: 10px;
+        margin-right: 10px;
+    }
+    .title-header{
+        font-size: 14px;
+        line-height: 30px;
+        font-weight: bold;
+        border-bottom: 1px solid #cccccc;
+    }
+
+    /deep/ .el-card__header {
+        padding: 0;
+    }
+
+    /deep/ .el-card__body {
+        padding: 5px 20px 20px 20px;
+    }
+
+    .econ-card-title {
+        background-color: rgb(52, 152, 219);
+        color: white;
+        font-weight: bold;
+        text-align: center;
+        font-size: 18px;
+        height: 36px;
+        line-height: 36px;
+    }
+
+    .tow-level-data {
+        width: 200px;
+        float: left;
+        font-size: 15px;
+        font-weight: bold;
+        padding-right: 20px;
+        box-sizing: border-box;
+        line-height: 40px;
+    }
+
+    .three-level-div {
+        float: left;
+        width: calc(100% - 200px);
+    }
+
+    .three-level-data {
+        float: left;
+        padding-right: 8px;
+        font-size: 14px;
+        font-weight: bold;
+        line-height: 40px;
+        box-sizing: border-box;
+    }
+
+    .four-level-data {
+        padding-right: 20px;
+        box-sizing: border-box;
+        float: left;
+        line-height: 40px;
+    }
+
+    .icon-div {
+        float: left;
+        padding-right: 10px;
+        box-sizing: border-box;
+    }
+
+    .icon-class {
+        font-size: 20px;
+        color: #3498DB;
+        line-height: 40px;
+    }
+
+
+    /*修改原生checkbox样式 start*/
+
+    .checkbox-label:hover{
+        color: #3D9DDD;
+    }
+
+    .checkbox-label {
+        display:inline-block;
+        cursor: pointer;
+    }
+
+    .checkbox-label-default {
+        display:inline-block;
+        cursor: default;
+    }
+
+    .inputStyleDemo {
+        background-color:#fff;
+        border:1px solid #DFDFDF;
+        border-radius:2px;
+        overflow: hidden;
+        display:block;
+        height:15px;
+        width:15px;
+        position: relative;
+        box-sizing: border-box;
+        float: left;
+        margin-top: 13px;
+        margin-right: 10px;
+    }
+
+    .inputStyleDemo-disabled {
+        background-color:#cccccc;
+        border:none;
+        border-radius:2px;
+        overflow: hidden;
+        display:block;
+        height:15px;
+        width:15px;
+        position: relative;
+        box-sizing: border-box;
+        float: left;
+        margin-top: 13px;
+        margin-right: 10px;
+    }
+
+    .checkbox-input:checked + .inputStyleDemo{
+        background-color: #409eff;
+        border-color: #409eff;
+    }
+
+    .checkbox-input:checked + .inputStyleDemo:after{
+        content: '';
+        position: absolute;
+        border-color: #fff;
+        border-style: solid;
+        border-width: 0 2px 2px 0;
+        width: 3px;
+        height: 7px;
+        top: 1px;
+        left: 4px;
+        transform: rotate(45deg) scaleY(1);
+    }
+    /*修改原生checkbox样式 end*/
+
+     hr {
+         background-color: #ffffff;
+         position:relative;
+         top:10px;
+         margin-left:20px;
+         margin-right:20px;
+         margin-bottom: 20px;
+         border-color: #D0DCE4;
+         border-style: dashed;
+         border-width: 0 1px 1px 0;
+    }
+
+    .navigation-div {
+        background-color: rgb(61, 118, 177);
+        line-height: 30px;
+        width: 96%;
+        color: white;
+        text-align: center;
+        cursor: pointer;
+        margin: 3px auto;
+        transition: all 0.3s ease 0s;
+        padding-left: 5px;
+        padding-right: 5px;
+    }
+
+    .navigation-div:hover {
+        background-color: rgb(30, 86, 144);
+    }
+
+</style>