hlt_gis_admin/src/views/systemAdmin/system/role/RoleModal.vue

<template>
    <a-modal :visible="true" :maskClosable="false" centered :destroyOnClose="true" :title="title"
        :wrapClassName="wrapClassName" :width="width" @cancel="onClose" @ok="onSubmit">
        <div class="content">
            <a-form ref="formRef" :model="form" :rules="rules" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
                <a-form-item label="角色名称" name="groupName">
                    <a-input v-model:value="form.groupName" style="width: 100%" placeholder="请输入名称" />
                </a-form-item>
                <a-form-item label="系统功能" name="checkedKeys">
                    <div class="tree-box">
                        <a-tree checkable :tree-data="menuTreeData" v-model:checkedKeys="form.checkedKeys"
                            class="tree-list" :replaceFields="{ children: 'children', key: 'id', title: 'name' }">
                        </a-tree>
                    </div>
                </a-form-item>
            </a-form>
        </div>
        <template #footer>
            <div class="btns" style="display: flex;justify-content: center;">
                <a-button class="btn" @click="onClose"
                    style="width: 64px;height: 34px;margin-right: 25px;color: #333333;">取消</a-button>
                <a-button class="btn" @click="onSubmit"
                    style="width: 64px;height: 34px;background: #0671DD;color: #ffffff;">确定</a-button>
            </div>
        </template>
    </a-modal>
</template>
<script>
import { defineComponent, reactive, ref, onMounted, watch, toRefs } from 'vue';
import { message } from 'ant-design-vue';
import moment from 'moment';
import { v4 as uuidv4 } from 'uuid';
//菜单树api
import { getMenuList } from '/@/api/sys/menu';
//获取与保存角色绑定的菜单数据
import { saveRoleMenu } from '/@/api/sys/user';
//保存角色信息
import { saveOrUpdateRoleInfoWithMenu } from '/@/api/system/system';

const props = {
}
export default defineComponent({
    name: 'modal',
    components: {},
    props,
    setup(props, { emit }) {
        const data = reactive({
            width: '546px',
            wrapClassName: 'modal-wrap',
        })
        const form = reactive({
            groupName: '',
            sort: '1',
            groupid: '',
            checkedKeys: []
        });
        const rules = {
            groupName: [{
                required: true,
                message: '请输入角色名称',
                trigger: 'blur'
            }]
        };
        const title = ref('新增角色')
        const formRef = ref()
        const menuTreeData = ref([])

        onMounted(() => {
            //此处请求菜单树
            getMenuList().then(res => {
                menuTreeData.value = res
            })
        })
        // 关闭请求弹窗
        const onClose = () => {
            emit('closeModal')
            resetForm()
        };
        const onSubmit = () => {
            formRef.value.validate().then(() => {
                let newId = uuidv4()
                let params = {
                    groupName: form.groupName,
                    sort: '1',
                    groupid: newId
                }
                saveOrUpdateRoleInfoWithMenu(params).then((res) => {
                    if (res === 1) {
                        let menusIds = [...new Set([].concat(form.checkedKeys))]
                        saveRoleMenu({
                            menusId: menusIds.join(","),
                            systemId: "1",
                            roleId: newId
                        }).then(r => {
                            if (r) {
                                message.success('角色新增成功')
                            } else {
                                message.error('权限绑定失败')
                            }
                            emit('onSubmit',true)
                            formRef.value.resetFields();
                        })
                    } else {
                        message.error('角色新增失败')
                        formRef.value.resetFields();
                        emit('onSubmit',false)
                    }
                });
            }).catch((error) => {
                console.log('error', error);
            });
        };
        const resetForm = () => {
            formRef.value.resetFields();
        };
        return {
            form,
            rules,
            title,
            formRef,
            menuTreeData,
            labelCol: { span: 6 },
            wrapperCol: { span: 12 },
            ...toRefs(data),
            //func
            onClose,
            onSubmit
        };
    },
});
</script>
<style lang="less" scoped>
.modal-wrap {
    .content {
        padding: 20px 20px 10px 20px;
        margin-top: 10px;

        ::v-deep .tree-box {
            width: 100%;
            height: 450px;
            overflow: auto;
            border-radius: 2px;
            box-sizing: border-box;
            border: 1px solid #D9D9D9;

            &::-webkit-scrollbar {
                width: 3px;
            }

            &::-webkit-scrollbar-thumb {
                border-radius: 2px;
                background: #ccd5df;
            }

            &::-webkit-scrollbar-track {
                display: none;
            }
        }
    }

    ::v-deep .ant-modal-footer {
        .btn {
            width: 64px;
            height: 34px;
            background-color: red;
        }
    }
}
</style>