init : 初始化
This commit is contained in:
clay
316
src/views/system/menu/DistributeRole.vue
Normal file
316
src/views/system/menu/DistributeRole.vue
Normal file
@@ -0,0 +1,316 @@
|
||||
<template>
|
||||
<el-form :model="queryParams" class="query-form" inline ref="roleForm">
|
||||
<el-form-item label="角色名称" prop="roleName">
|
||||
<el-input
|
||||
v-model="queryParams.roleName"
|
||||
placeholder="请输入角色名称"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="角色标识符" prop="roleKey">
|
||||
<el-input
|
||||
v-model="queryParams.roleKey"
|
||||
placeholder="请输入角色标识符"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="searchRole" :icon="Search">搜索</el-button>
|
||||
<el-button @click="handleReset" :icon="Refresh">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="table-header-btn">
|
||||
<el-button type="primary" @click="handleAdd" :icon="Plus">添加角色</el-button>
|
||||
<el-button type="danger" @click="handleCancelAll" :icon="CircleClose" plain>全部取消</el-button>
|
||||
<el-button type="danger" @click="handleCancelAuthorization(cancelRoleIds,roleNames)" :icon="CircleClose" plain :disabled="moreCancelDisabled">批量取消</el-button>
|
||||
</div>
|
||||
<div class="table">
|
||||
<el-table
|
||||
:data="list"
|
||||
row-key="roleId"
|
||||
:lazy="true"
|
||||
ref="table"
|
||||
v-loading="loading"
|
||||
@select="handleSelect"
|
||||
>
|
||||
<el-table-column type="selection" width="55"/>
|
||||
<el-table-column label="序号" type="index" align="center" width="60"/>
|
||||
<el-table-column prop="roleName" label="角色名称" align="center"/>
|
||||
<el-table-column prop="roleKey" label="角色标识符" align="center"/>
|
||||
<el-table-column prop="dataScope" label="数据范围" align="center">
|
||||
<template #default="scope">
|
||||
<el-text v-if="scope.row.dataScope == '1'">所有数据权限</el-text>
|
||||
<el-text v-if="scope.row.dataScope == '2'">自定义数据权限</el-text>
|
||||
<el-text v-if="scope.row.dataScope == '3'">本部门数据权限</el-text>
|
||||
<el-text v-if="scope.row.dataScope == '4'">本部门及以下数据权限</el-text>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="roleSort" label="显示顺序" align="center"/>
|
||||
<el-table-column prop="state" label="状态" align="center">
|
||||
<template #default="scope">
|
||||
<tag dict-type="normal_disable" :value="scope.row.state"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" align="center" width="180px"/>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default="scope">
|
||||
<el-button type="text" size="mini"
|
||||
@click="handleCancelAuthorization(scope.row.roleId,scope.row.roleName)" :icon="CircleClose">取消授权
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<paging :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize" :page-sizes="[10, 20, 30, 40,50]"
|
||||
:total="total" @changeSize="handleSizeChange" @goPage="handleCurrentChange"/>
|
||||
<el-dialog v-model="isVisited" :title="title" width="830px">
|
||||
<el-form :model="query" class="query-form" inline ref="formInstance">
|
||||
<el-form-item label="角色名称" prop="roleName">
|
||||
<el-input
|
||||
v-model="query.roleName"
|
||||
placeholder="请输入角色名称"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="角色标识符" prop="roleKey">
|
||||
<el-input
|
||||
v-model="query.roleKey"
|
||||
placeholder="请输入角色标识符"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="getExcludeRole" :icon="Search">搜索</el-button>
|
||||
<el-button @click="handleDialogReset" :icon="Refresh">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="table">
|
||||
<el-table
|
||||
:data="roleList"
|
||||
row-key="roleId"
|
||||
:lazy="true"
|
||||
v-loading="dialogLoading"
|
||||
@select="handleDialogSelect"
|
||||
>
|
||||
<el-table-column type="selection" width="55"/>
|
||||
<el-table-column label="序号" type="index" align="center" width="60"/>
|
||||
<el-table-column prop="roleName" label="角色名称" align="center"/>
|
||||
<el-table-column prop="roleKey" label="角色标识符" align="center"/>
|
||||
<el-table-column prop="dataScope" label="数据范围" align="center">
|
||||
<template #default="scope">
|
||||
<el-text v-if="scope.row.dataScope == '1'">所有数据权限</el-text>
|
||||
<el-text v-if="scope.row.dataScope == '2'">自定义数据权限</el-text>
|
||||
<el-text v-if="scope.row.dataScope == '3'">本部门数据权限</el-text>
|
||||
<el-text v-if="scope.row.dataScope == '4'">本部门及以下数据权限</el-text>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="roleSort" label="显示顺序" align="center"/>
|
||||
<el-table-column prop="state" label="状态" align="center">
|
||||
<template #default="scope">
|
||||
<tag dict-type="normal_disable" :value="scope.row.state"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" align="center" width="180px"/>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default="scope">
|
||||
<el-button type="text" size="mini"
|
||||
@click="handleSubmit(scope.row.roleId)" >添加
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<paging :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize" :page-sizes="[10, 20, 30, 40,50]"
|
||||
:total="dialogTotal" @changeSize="handleSizeChangeDialog" @goPage="handleCurrentChangeDialog"/>
|
||||
|
||||
<template #footer>
|
||||
<span>
|
||||
<el-button @click="handleCancel">取消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit(roleIds)" :disabled="dialogDisabled">批量添加</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {Plus, Search, Refresh, CircleClose} from "@element-plus/icons-vue";
|
||||
import {ElMessage, ElMessageBox} from "element-plus";
|
||||
import {getRoleInfoByMenuId,getRoleExcludeMenuId,unbindAllRole,cancelAuthorization,bindRoleAndMenu} from "@/api/role/role"
|
||||
import {useRouter} from "vue-router";
|
||||
import Tag from '@/components/Tag.vue'
|
||||
import Paging from "@/components/pagination/index.vue";
|
||||
|
||||
const router = useRouter();
|
||||
const menuId = reactive(router.currentRoute.value.params.menuId)
|
||||
const roleForm = ref();
|
||||
const table = ref();
|
||||
const title = ref('添加角色');
|
||||
const list = ref([]);
|
||||
const roleList = ref([]);
|
||||
const total = ref([]);
|
||||
const dialogTotal = ref([]);
|
||||
const moreCancelDisabled = ref(true);
|
||||
const dialogDisabled = ref(true);
|
||||
const loading = ref(true);
|
||||
const dialogLoading = ref(true);
|
||||
const roleNames = ref([]);
|
||||
const cancelRoleIds = ref([]);
|
||||
const roleIds = ref([]);
|
||||
const queryParams = reactive({
|
||||
roleName: "",
|
||||
roleKey: ""
|
||||
});
|
||||
const query = reactive({
|
||||
roleName: "",
|
||||
roleKey: ""
|
||||
});
|
||||
const pageInfo = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
});
|
||||
const formInstance = ref();
|
||||
const isVisited = ref(false);
|
||||
const form = ref();
|
||||
//角色搜索重置
|
||||
const handleReset = () => {
|
||||
roleForm.value.resetFields();
|
||||
searchRole();
|
||||
};
|
||||
const handleDialogReset = () => {
|
||||
formInstance.value.resetFields();
|
||||
getExcludeRole();
|
||||
};
|
||||
//根据角色id获取角色信息
|
||||
const searchRole = async () => {
|
||||
let params = {
|
||||
menuId: menuId,
|
||||
...queryParams,
|
||||
...pageInfo
|
||||
};
|
||||
getRoleInfoByMenuId(params).then(res => {
|
||||
if (res.code === 1000) {
|
||||
list.value = res.data.rows;
|
||||
total.value = res.data.total;
|
||||
loading.value = false;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
};
|
||||
//获取添加弹窗的角色
|
||||
const getExcludeRole = async () => {
|
||||
let params = {
|
||||
menuId: menuId,
|
||||
...query,
|
||||
...pageInfo
|
||||
};
|
||||
getRoleExcludeMenuId(params).then(res => {
|
||||
if (res.code === 1000) {
|
||||
roleList.value = res.data.rows;
|
||||
dialogTotal.value = res.data.total;
|
||||
dialogLoading.value = false;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//添加角色
|
||||
const handleAdd = () => {
|
||||
getExcludeRole()
|
||||
isVisited.value = true
|
||||
dialogDisabled.value = true
|
||||
}
|
||||
//全部取消授权
|
||||
const handleCancelAll = () => {
|
||||
ElMessageBox.confirm(`确认全部取消授权吗?`, "系统提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(() => {
|
||||
unbindAllRole(menuId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
searchRole()
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
//取消授权
|
||||
const handleCancelAuthorization = (roleId,roleName) => {
|
||||
ElMessageBox.confirm(`确认取消授权角色名称为"${roleName}"的角色吗?`, "系统提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(() => {
|
||||
cancelAuthorization(menuId, roleId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
moreCancelDisabled.value=true
|
||||
searchRole()
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
//取消
|
||||
const handleCancel = () => {
|
||||
isVisited.value = false;
|
||||
};
|
||||
|
||||
const handleSelect = (selection) => {
|
||||
if (selection.length !== 0) {
|
||||
moreCancelDisabled.value = false;
|
||||
cancelRoleIds.value=selection.map(item=>item.roleId).join()
|
||||
roleNames.value=selection.map(item=>item.roleName).join()
|
||||
} else {
|
||||
moreCancelDisabled.value = true;
|
||||
}
|
||||
}
|
||||
const handleDialogSelect = (selection) => {
|
||||
if (selection.length !== 0) {
|
||||
dialogDisabled.value = false;
|
||||
roleIds.value=selection.map(item=>item.roleId).join()
|
||||
} else {
|
||||
dialogDisabled.value = true;
|
||||
}
|
||||
}
|
||||
//添加角色
|
||||
const handleSubmit = (roleId) => {
|
||||
bindRoleAndMenu(menuId,roleId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
searchRole()
|
||||
isVisited.value = false
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
//切换每页显示条数
|
||||
const handleSizeChange = (val) => {
|
||||
pageInfo.pageSize = val;
|
||||
searchRole();
|
||||
};
|
||||
const handleSizeChangeDialog = (val) => {
|
||||
pageInfo.pageSize = val;
|
||||
getExcludeRole();
|
||||
};
|
||||
|
||||
//点击页码进行分页功能
|
||||
const handleCurrentChange = (val) => {
|
||||
pageInfo.pageNum = val;
|
||||
searchRole();
|
||||
};
|
||||
const handleCurrentChangeDialog = (val) => {
|
||||
pageInfo.pageNum = val;
|
||||
getExcludeRole();
|
||||
};
|
||||
|
||||
searchRole()
|
||||
</script>
|
||||
Reference in New Issue
Block a user