eta_front/src/views/classify_manage/components/PermissionDialog.vue

<template>
  <el-dialog 
  v-dialogDrag
  :visible.sync="isShow"
  :title="$t('ReportManage.CategoryList.configuration_btn')"
  :modal-append-to-body='false'
  center
  @close="cancelHandle"
  width="1080px"
  class="permission-dialog">
    <p style="line-height:40px;margin-bottom:20px">{{$t('ReportManage.CategoryList.check_permissions')}}:</p>
    <div v-for="itemGroup,index in configList" :key="index" class="group-list">
        <div style="flex-shrink: 0;margin-right:30px">
            <el-checkbox class="item-group" :value="isCheckedAll(itemGroup)" :indeterminate="isIndeterminate(itemGroup)" @change="groupChange(itemGroup,$event)">{{itemGroup.ClassifyName}}:</el-checkbox>
        </div>
        <div style="flex:1">
            <el-checkbox style="margin-bottom:15px" v-model="checkedItems" v-for="item in itemGroup.Items" :key="item.ChartPermissionId" :label="item.ChartPermissionId">{{item.PermissionName}}</el-checkbox>
        </div>
        
    </div>
      <!-- 底部按钮 -->
      <div slot="footer">
          <el-button type="primary" @click="save">{{$t('Dialog.confirm_save_btn')}}</el-button>
          <el-button type="primary" @click="reset" v-if="haveReset">{{$t('Dialog.reset_btn')}}</el-button>
          <el-button @click="cancelHandle">{{$t('Dialog.cancel_btn')}}</el-button>
      </div>
  </el-dialog>
</template>

<script>
import { customInterence,classifyPermissionInterface} from 'api/api.js'
// permissionType==chapterType 章节类型
import { getchapterTPermissionList} from 'api/api.js'

export default {
    props: {
        isShow: {
            type: Boolean,
            require: true
        },
        id:{
            type: Number,
            require: true
        },
        haveReset:{
            type: Boolean,
            default:true
        },
        permissionType:{
            type: String,
            default:'classify'
        }
    },
    data() {
        return {
            configList:[],  // 权限配置列表
            checkedItems:[],    // 当前选中项列表
            initCheckedItems:[],    // 初始选中项列表(用于比较最后是否做了修改)
        }
    },
    methods: {
        // 获取权限设置基础信息列表
        async getPermissionList(){
            try{
                const res = await customInterence.authList({CompanyType:'ficc'})
                if(res.Ret===200){
                    this.configList=res.Data.List
                }
            }catch(err){
                console.log(err);
            }
        },
        // 获取分类权限列表
        async getClassifyPermissionList(){
            try{
                if(this.permissionType=='classify'){
                    // 分类
                    const res = await classifyPermissionInterface.classifyPermissionList({ClassifyId:this.id})
                    if(res.Ret===200){
                        // 保存一个初始的选中项列表
                        this.initCheckedItems=res.Data&&res.Data.length?res.Data.map(item=>item.ChartPermissionId):[]
                        this.checkedItems=res.Data&&res.Data.length?res.Data.map(item=>item.ChartPermissionId):[]
                    }
                }else{
                    // 章节类型
                    getchapterTPermissionList({ReportChapterTypeId:this.id}).then(res=>{
                        if(res.Ret == 200){
                            // 保存一个初始的选中项列表
                            this.initCheckedItems=res.Data&&res.Data.length?res.Data.map(item=>item.ChartPermissionId):[]
                            this.checkedItems=res.Data&&res.Data.length?res.Data.map(item=>item.ChartPermissionId):[]
                        }
                    })
                }

            }catch(err){
                console.log(err);
            }
        },
        // 保存
        async save(){
            // 比较用户是否做了改动
            if(JSON.stringify(this.initCheckedItems.sort())!==JSON.stringify(this.checkedItems.sort())){
                // 做了修改
                try{
                    if(this.permissionType=='classify'){
                        // 分类
                        const res = await classifyPermissionInterface.editClassifyPermission({
                            ClassifyId:this.id,
                            ChartPermissionIdList:this.checkedItems
                        })
                        console.log(res);
                        if(res.Ret===200){
                            this.$message.success(this.$t('MsgPrompt.saved_msg'))
                            this.$emit('saveConfig',this.id)
                        }
                    }else{
                        this.$emit('saveConfig',{
                            Id:this.id,
                            ChartPermissionIdList:this.checkedItems
                        })
                    }

                }catch(err){
                    console.log(err);
                }
            }else{
                this.cancelHandle()
            }
        },
        // 重置
        reset(){
            // 清空数据
            this.checkedItems=[]
        },
        // 取消
        cancelHandle() {
            this.$emit('update:isShow',false)
        },
        // 大项复选框改变
        groupChange(itemGroup,val){
            if(val){
                // 大项选中,将组中所有小项选中
                itemGroup.Items.forEach(item=>{
                    if(!this.checkedItems.includes(item.ChartPermissionId)) this.checkedItems.push(item.ChartPermissionId)
                })
            }else{
                // 大项取消,将组中所有小项取消
                this.checkedItems=this.checkedItems.filter(item=>!itemGroup.Items.map(item=>item.ChartPermissionId).includes(item))
            }
        }
    },
    created () {
        this.getPermissionList();
    },
    computed: {
        // 计算是否全选
        isCheckedAll(){
            return itemGroup=>itemGroup.Items.every(item=>this.checkedItems.includes(item.ChartPermissionId))
        },
        // 计算是否模糊
        isIndeterminate(){
            return itemGroup=>!itemGroup.Items.every(item=>this.checkedItems.includes(item.ChartPermissionId)) && itemGroup.Items.some(item=>this.checkedItems.includes(item.ChartPermissionId))
        }
    },
    watch: {
        isShow(val){
            if(val){
                // 弹窗显示时
                this.getClassifyPermissionList()
            }else{
                // 关闭
                this.reset()
            }
        }
    },
}
</script>

<style lang="scss">
.permission-dialog{
    .el-dialog__body{
        .group-list{
            // line-height: 80px;
            margin-bottom: 40px;
            display: flex;
            .item-group{
                font-weight: 900;
            }
        }
    }
}
</style>