sora_front/src/views/childView/systemSetting/roleManage.vue

<template>
    <div class="role_manage_page list_page">
        <div class="list_page_content">
            <div class="list_top_content">
                <div class="list_top_search_content">
                    <div class="search_content_left">
                        <filterComponent :title="'Role Name or Id'"><a-input v-model:value="name" size="large" placeholder="Please input Role Name or Id"  @keydown.enter="searchList()"/></filterComponent>
                    </div>
                </div>
                <div class="list_top_button_content">
                    <a-button class="primary_button btn-margin-r-20" type="primary" size="large" @click="searchList()">Seach</a-button>
                    <a-button class="default_button" size="large" @click="resetList()">Reset</a-button>
                    <a-button class="primary_button btn-margin-t-35" type="primary" size="large" @click="addRole()">+Add Role</a-button>
                </div>
            </div>
            <div class="list_table_content">
                <a-table :columns="columns" :data-source="collectionList"  @change="changePage" :loading="tableLoading"
                    :pagination="{
                    showSizeChanger:true,
                    current: currentPage,
                    pageSize:pageSize,
                    total: total,
                    showQuickJumper:true,
                    bordered:false,
                    pageSizeOptions:['10','20','50'],
                }">
                    <template v-slot:bodyCell="{column,record, index}" >
                        <template v-if="column.dataIndex === 'operation'">
                            <div class="operate_list">
                                <div class="operate_item" @click="editRole(record)">Edit</div>
                                <div class="operate_item" @click="deleteRole(record,index)">Delete</div>
                            </div>
                        </template>
                        
                    </template>
                </a-table>
            </div>
        </div>

        <a-modal class="edit_modal_component" 
            v-model:visible="editRoleModal" 
            :footer="null" 
            :title="editRoleTitle"
            width="680px"
            :maskClosable="false"
            :centered="true"
            @cancel="closeRole"
        >
            <a-form ref="formRef" :model="formState" :rules="rules" :layout="'vertical'" >
                <a-form-item label="Role Name" name="name">
                    <a-input v-model:value="formState.name" size="large" placeholder="Please input role name"/>
                </a-form-item>
                <div>
                    <div class="form_item_title required">Role Permission</div>
                    <a-checkbox class="form_check_all" size="large" v-model:checked="permissionCheckAll" @change="perCheckAll">All</a-checkbox>
                    <table class="permission_table">{{ rolePermission }}
                        <tr v-for="(role) in rolePermission" :key="role.code">
                            <td class="first_td">
                                <div class="table_td_block"><a-checkbox size="large" v-model:checked="role.select" @change="checkLevelFirst(role)">{{role.resource}}</a-checkbox></div>
                            </td>
                            <td class="second_td">
                                <div class="table_td_block" v-for="(menu) in role.level2ResourceList" :key="menu.code"><a-checkbox size="large" v-model:checked="menu.select" @change="checkLevelSec(role,menu)">{{menu.resource}}</a-checkbox></div>
                            </td>
                            <td class="third_td">
                                <div class="table_td_block" v-for="(menu) in role.level2ResourceList" :key="menu.code">
                                    <div class="table_td_permission">
                                        <div v-for="(per) in menu.operationList" :key="per.code"><a-checkbox :disabled="!menu.select"  size="large" v-model:checked="per.select">{{per.resource}}</a-checkbox></div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
                
            </a-form>
            <div class="modal_button_list">
                 <a-button class="default_button btn-margin-r-20" size="large" @click="closeRole()">Cancel</a-button>
                 <a-button class="primary_button" type="primary" size="large" @click="confirmSubmit()">Submit</a-button>
            </div>
        </a-modal>
    </div>
</template>

<script lang="ts">
import { defineComponent,ref,reactive,toRefs,UnwrapRef,onMounted,createVNode } from "vue";
import filterComponent from '@/component/filterComponent.vue'
import { message,Modal } from "ant-design-vue";
import { Https } from "@/tool/https";
import { WarningOutlined } from '@ant-design/icons-vue';

export default defineComponent({
    name:'roleManage',
    components:{filterComponent},
    setup(){
        let filter =  reactive({
            name:'',
        })
        let tableLoading = ref(false)
        let columns = reactive([
            { title: 'Role Name', align:'center', ellipsis: true,  dataIndex: 'name', key: 'name', width:250 },
            { title: 'Role Permission', align:'center', ellipsis: true,  dataIndex: 'permission', key: 'permission'},
            {
                title: 'Operations',
                key: 'operation',
                align:'center', 
                fixed: 'right',
                width: 250, 
                dataIndex:'operation',
              
            },
        ])
        let collectionList = ref([])
        let currentPage = ref(1)
        let pageSize = ref(10)
        let total = ref(1)
        let editRoleModal = ref(false)
        let editRoleTitle = ref('Add Role')
        let permissionCheckAll=ref(false)
        let rolePermission:any = ref([])
        let backupRolePermission:any = ref([])
        let formRef = ref();
        let formState = ref({
            id: '',
            name: '',
        });
        let rules = {
            name: [
                { required: true, message: 'Please input role name', trigger: 'blur' },
            ],
            roleType: [
                { required: true, message: '', trigger: 'blur' },
            ],
        }

        let changePage = (e:any) =>{
            currentPage.value = e.current
            pageSize.value = e.pageSize
            getRoleList()
        }

        let closeRole = () =>{
            formState.value = {
                id: '',
                name: '',
            }
            permissionCheckAll.value = false
            rolePermission.value = JSON.parse(JSON.stringify(backupRolePermission.value))
            editRoleModal.value = false
        }

        let addRole = () =>{
            editRoleTitle.value = 'Add Role'
            editRoleModal.value = true
        }

        let editRole = (data:any,) =>{
            editRoleModal.value = true
            editRoleTitle.value = 'Eidt Role'
            formState.value = {
                id: data.id,
                name: data.name,
            }
            rolePermission.value = changeSelectBoolean(data.rolePermission.level1ResourceList)
            permissionCheckAll.value = data.rolePermission.allSelect
        }

        let getRoleList = () =>{
            let data = {
                name : filter.name,
                page:currentPage.value,
                size:pageSize.value
            }
            tableLoading.value = true
            Https.axiosPost(Https.httpUrls.roleQueryRolePage, data).then(
                (rv: any) => {
                    if (rv) {
                        tableLoading.value = false
                        collectionList.value = rv.content.map((v:any) =>{
                            let data = {
                                ...v,
                                permission:v.rolePermission.level1ResourceList.filter((v:any)=>v.select).map((per:any) => per.resource).join('、')
                            }
                            return data
                        })
                        total.value = rv.total
                    }
                }
            );
        }

        let getMenuListPer = () =>{
            Https.axiosGet(Https.httpUrls.roleQueryPermissionList).then(
                (rv: any) => {
                    if (rv) {
                        rolePermission.value =  changeSelectBoolean(rv)
                        backupRolePermission.value = changeSelectBoolean(rv)
						console.log(rolePermission.value);
						
                    }
                }
            );
        }

        let changeSelectBoolean = (data:any) =>{
            let newData = JSON.parse(JSON.stringify(data))
            for(let first of newData){
                first.select = changeBooleanNumber(first.select)
                for(let sec of first.level2ResourceList){
                    sec.select = changeBooleanNumber(sec.select)
                    for(let third of sec.operationList){
                        third.select = changeBooleanNumber(third.select)
                    }
                }
            }
            return newData
        }

        //判断是布尔值则转为数字，数字则转布尔值
        let changeBooleanNumber = (data:any) => {
            let newData = data
            if(newData.constructor === Boolean){
                newData = newData ? 1 :0
            }else{
                newData = newData ? true :false
            }
            return newData
        }

        let searchList = () =>{
            currentPage.value = 1
            getRoleList()
        }

        let resetList = () =>{
            currentPage.value = 1
            filter.name = ''
            getRoleList()
        }


        let deleteRole = (data:any,index:any) =>{
            let confirmDelete = (data:any,index:any) =>{
                let newData = {
                    id:data.id
                }
                Https.axiosPost(Https.httpUrls.roleDelete, newData).then(
                    (rv: any) => {
                        if (rv) {
                            message.success('Delete success')
                            collectionList.value.splice(index,1)
                        }
                    }
                );
            }
            Modal.confirm({
                    title: "Are you sure delete the role?",
                    icon: createVNode(WarningOutlined),
                    class:'confirm_style',
                    okText: 'Ok',
                    cancelText: 'Cancel',
                    // centered:true,
                    onOk() {
                       confirmDelete(data,index)
                    }
                });
        }

        let perCheckAll = () =>{
            for(let first of rolePermission.value){
                first.select = permissionCheckAll.value
                for(let sec of first.level2ResourceList){
                    sec.select = permissionCheckAll.value
                    for(let third of sec.operationList){
                        third.select = permissionCheckAll.value
                    }
                }
            }
        }

        let checkLevelFirst = (firstDdata:any) =>{
            for(let sec of firstDdata.level2ResourceList){
                sec.select = firstDdata.select
                for(let third of sec.operationList){
                    third.select = firstDdata.select
                }
            }
            checkIsAllPer()
        }

        let checkLevelSec = (firstData:any, secondData:any) =>{
            for(let third of secondData.operationList){
                third.select = secondData.select
            }
            let status = false
            for(let item of firstData.level2ResourceList){
                if(item.select){
                    status = true
                    break
                }
            }
            firstData.select = status
            checkIsAllPer()
        }

        //判断是否已经全部勾选
        let checkIsAllPer = () =>{
            let status = true
            for(let first of rolePermission.value){
                if(!first.select){
                    status = false
                    break
                }
                for(let sec of first.level2ResourceList){
                    if(!sec.select){
                        status = false
                        break
                    }
                }
                if(!status){break}
            }
            permissionCheckAll.value = status
        }

        let confirmSubmit = () =>{
            let data = {
                ...formState.value,
                rolePermission:{
                    allSelect:permissionCheckAll.value ? 1 : 0,
                    level1ResourceList:changeSelectBoolean(rolePermission.value)
                },
                timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
            }
            formRef.value.validate().then(()=>{
                let status = false
                for(let first of rolePermission.value){
                    if(first.select){
                        status = true
                        break
                    }
                    for(let sec of first.level2ResourceList){
                        if(sec.select){
                            status = true
                            break
                        }
                    }
                    if(status){break}
                }
                if(!status){
                     message.error('Please check role permission')
                     return
                }
                submit()
            })
            let submit = () => {
                Https.axiosPost(Https.httpUrls.roleSaveOrEdit, data).then(
                    (rv: any) => {
                        if (rv) {
                            let tip = !formState.value.id ? 'Role added successfully' :'Edit role successfully'
                            message.success(tip)
                            resetList()
                            closeRole()
                        }
                    }
                );
            }
                
        }

        onMounted(() => {
           getRoleList()
           getMenuListPer()
        })
        
  
        return {
            ...toRefs(filter),
            tableLoading,
            columns,
            collectionList,
            currentPage,
            pageSize,
            total,
            permissionCheckAll,
            rolePermission,
            editRoleModal,
            editRoleTitle,
            formRef,
            formState,
            rules,
            changePage,
            closeRole,
            addRole,
            editRole,
            searchList,
            resetList,
            deleteRole,
            perCheckAll,
            checkLevelFirst,
            checkLevelSec,
            confirmSubmit,
        }
        
    },
   
});
</script>
<style lang="less" scoped>
.role_manage_page{
    padding-left: 28px;

    .role_pic{
        width: 50px;
    }

   .operate_list{
       display: flex;
       justify-content: space-between;
       padding: 0 50px;

       .operate_item{
            font-size: 14px;
            font-family: Roboto;
            font-weight: 400;
            color: #343579;
            cursor: pointer;
       }
   }
}

.form_check_all{
    margin: 10px 0;
}

.permission_table{
    width: 100%;
    margin-top: 10px;
    border-left:1px solid #DFDFDF;
    border-top:1px solid #DFDFDF;

    td{
        border-bottom: 1px solid #DFDFDF;
        border-right:  1px solid #DFDFDF;

        .table_td_block{
            padding: 16px 0 16px 20px;
            border-bottom: 1px solid #DFDFDF;

            &:last-child{
                border-bottom: none;
            }
        }

        .table_td_permission{
            display: flex;
            min-height: 23px;
        }
    }

    .first_td{
        width: 120px;
    }

    .second_td{
        width: 150px;
    }
}


</style>