sasp-admin 0.2.57

package/src/views/threeinone/safeSpv/safeSpvMain.vue

@@ -0,0 +1,335 @@
+<template>
+    <el-container style="width: 100%;height: 100%;position: relative;">
+        <div style="position: absolute;top: 20px;right: 10px;z-index:99999">
+            <el-button type="info" size="small" v-if="showBtn['return']" @click="returnSet()">返回</el-button>
+            <el-button type="warning" size="small" v-if="showBtn['save']" @click="saveSetting()">保存配置</el-button>
+            <el-button type="warning" size="small" v-if="showBtn['personalize']" @click="openPerson()">开启个性化监管</el-button>
+            <el-button type="warning" size="small" v-if="showBtn['reduction']" @click="restoreDefault()">还原为默认配置</el-button>
+            <el-button type="success" size="small" v-if="showBtn['edit']" @click="edit()">修改</el-button>
+        </div>
+
+        <!--标题 start-->
+        <el-header class="title-header" height="30px">
+            <span style="color: red;">{{currentClickSpv.name}}（{{currentClickSpv.countSshy}}）</span><span> 所属行业维护</span>
+        </el-header>
+        <!--标题 end-->
+        <el-main style="padding: 10px 5px 5px 10px;">
+            <div v-for="econData in econDataArr" :key="econData.id" style="padding-bottom: 10px;box-sizing: border-box;">
+                <el-card class="box-card">
+                    <!--一级数据 start-->
+                    <div slot="header" class="econ-card-title" :ref="'econTitle_' + econData.id" >
+                        <div style="float: left;padding-left: 20px;box-sizing: border-box;" v-if="(source == '1') || isEdit">
+                            <el-checkbox v-model="checkedEconObj[econData.id]" @change="checkEcon(econData.id)"></el-checkbox>
+                        </div>
+                        <span>{{econData.text}}</span>
+                    </div>
+                    <!--一级数据 end-->
+                    <div v-for="(towLevel,index) in econData.children" :key="towLevel.id">
+                        <div style="clear: both;">
+                            <!--二级数据-->
+                            <div class="tow-level-data">{{towLevel.text}}</div>
+                            <div class="three-level-div">
+                                <div v-for="threeLevel in towLevel.children" :key="threeLevel.id" style="clear: both;">
+                                    <!--三级数据-->
+                                    <div class="three-level-data">{{threeLevel.text}}</div>
+                                    <div class="icon-div">
+                                        <i class="el-icon-caret-right icon-class"></i>
+                                    </div>
+                                    <!--四级数据-->
+                                    <div v-for="fourLevel in threeLevel.children" :key="fourLevel.id" class="four-level-data">
+                                        <label :class="isDisabled(fourLevel.id) ? 'checkbox-label-default' : 'checkbox-label'">
+                                            <input class="checkbox-input" type="checkbox" v-model="checkedEconObj[fourLevel.id]"
+                                                   style="display: none;" :disabled="(checkboxIsView || isDisabled(fourLevel.id))"/>
+                                            <span :class="isDisabled(fourLevel.id) ? 'inputStyleDemo-disabled' : 'inputStyleDemo'"></span>
+                                            <span :style="isDisabled(fourLevel.id) ? 'color:#cccccc' : ''">{{fourLevel.text}}</span>
+                                        </label>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <!--分割线-->
+                        <hr v-if="index != ((econData.children || []).length - 1)">
+                    </div>
+                </el-card>
+            </div>
+        </el-main>
+    </el-container>
+</template>
+
+<script>
+    export default {
+        name: "safeSpvMain",
+        props:{
+            safeSpvInfo:{type:Object,default:() => {return {};}},
+            currentClickSpv:{type:Object,default:() => {return {};}},
+            econDataArr:{type:Array,default:() => {return [];}},
+            checkedEconObj:{type:Object,default:() => {return {};}},
+            isDisabled:{type:Function,default:null},
+            checkboxIsView:{type:Boolean,default:false},
+            showBtn:{type:Object,default:() => {return {};}},
+            spvTreeDataArr:{type:Array,default:() => {return [];}},
+            isEdit:{type:Boolean,default:false},
+            source:{type:String,default:"1"},//来源，1-修改系统默认监管配置
+            checkEcon:{type:Function,default:null},
+            refreshEconSet:{type:Function,default:null},
+            changeFromOpenPerson:{type:Function,default:null},
+        },
+
+        data(){
+            return {
+
+            }
+        },
+
+        methods:{
+            /**
+             * 修改
+             */
+            edit(){
+                this.$set(this.showBtn,"personalize",false);
+                this.$set(this.showBtn,"reduction",false);
+                this.$set(this.showBtn,"edit",false);
+                this.$set(this.showBtn,"return",true);
+                this.$set(this.showBtn,"save",true);
+                this.$emit("changeEdit",true);
+            },
+
+            /**
+             * 开启个性化配置
+             */
+            async openPerson(){
+                this.refreshEconSet && this.refreshEconSet(false);
+                //设置之前的个性化配置有效
+                await this.axios.post(this.api.safeRegion.updateOpenStatus,{id:this.safeSpvInfo.id,openStatus:"9"});
+                this.$set(this.safeSpvInfo,"openStatus","9");
+
+                this.$set(this.showBtn,"personalize",false);
+                this.$set(this.showBtn,"return",true);
+                this.$set(this.showBtn,"save",true);
+                this.$emit("changeEdit",true);
+                this.changeFromOpenPerson && this.changeFromOpenPerson(true);
+                this.refreshEconSet && this.refreshEconSet(true);
+
+            },
+
+            /**
+             * 返回
+             */
+            returnSet(){
+                this.$set(this.showBtn,"reduction",true);
+                this.$set(this.showBtn,"edit",true);
+                this.$set(this.showBtn,"personalize",false);
+                this.$set(this.showBtn,"return",false);
+                this.$set(this.showBtn,"save",false);
+                this.$emit("changeEdit",false);
+                this.changeFromOpenPerson && this.changeFromOpenPerson(false);
+            },
+
+            /**
+             * 保存配置
+             */
+            saveSetting(){
+                let loading = this.$loading({
+                    lock: true,
+                    text: '正在保存，请稍后....',
+                    spinner: 'el-icon-loading',
+                    background: 'rgba(0, 0, 0, 0.7)'
+                });
+
+
+                let spvEcons = [];
+                Object.keys(this.checkedEconObj).forEach(econId => {
+                    if(this.checkedEconObj[econId]){
+                        spvEcons.push({econId:econId});
+                    }
+                });
+                let paramObj = {
+                    spvId:this.currentClickSpv.id,
+                    jgAreaId:"",
+                    ajtype:"9",
+                    spvEcons:JSON.stringify(spvEcons),
+                };
+                this.axios.post(this.api.safeSpvEcon.batchAdd,paramObj).then(res => {
+                    if(res && res.data && res.data.operateSuccess){
+                        this.$message({message:"保存成功！",type:"success"});
+                    }else{
+                        this.$message({message:"保存失败！",type:"error"});
+                    }
+                    loading && loading.close();
+                });
+            },
+
+            /**
+             * 还原为默认配置
+             */
+            restoreDefault(){
+                this.$confirm('确认恢复默认配置吗？当您再次开启时会继续当前保存的个性化配置！', '提示', {
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                    type: 'warning'
+                }).then(() => {
+                    this.refreshEconSet && this.refreshEconSet(false);
+                    this.axios.post(this.api.safeRegion.updateOpenStatus,{id:this.safeSpvInfo.id,openStatus:"1"}).then(res => {
+                        if(res && res.data && res.data.operateSuccess){
+                            // this.$emit("getSafeSpvData");
+                            this.$set(this.showBtn,"personalize",true);
+                            this.$set(this.showBtn,"reduction",false);
+                            this.$set(this.showBtn,"edit",false);
+                            this.$set(this.safeSpvInfo,"openStatus","1");
+                        }
+                        this.refreshEconSet && this.refreshEconSet(true);
+                    });
+                });
+            },
+        }
+    }
+</script>
+
+<style scoped>
+    .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;
+    }
+
+</style>