532 lines
14 KiB
Vue
532 lines
14 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<a-form :model="queryForm" ref="queryFormRef" layout="inline">
|
|
<a-form-item field="role_name" label="角色名称">
|
|
<a-input v-model="queryForm.role_name" placeholder="请输入角色名称" @press-enter="handleQuery" />
|
|
</a-form-item>
|
|
<!-- <a-form-item field="roleKey" label="权限字符">
|
|
<a-input v-model="queryForm.roleKey" placeholder="请输入权限字符" @press-enter="handleQuery" />
|
|
</a-form-item> -->
|
|
<!-- <a-form-item field="status" label="状态">
|
|
<a-select v-model="queryForm.role_status" placeholder="请选择角色状态">
|
|
<a-option :value="2">正常</a-option>
|
|
<a-option :value="1">停用</a-option>
|
|
</a-select>
|
|
</a-form-item> -->
|
|
<a-form-item>
|
|
<a-space>
|
|
<a-button type="primary" @click="handleQuery">
|
|
<icon-search /> 搜索</a-button>
|
|
<a-button @click="handleResetQuery">
|
|
<icon-loop /> 重置</a-button>
|
|
</a-space>
|
|
</a-form-item>
|
|
</a-form>
|
|
|
|
<a-divider />
|
|
|
|
<div class="action">
|
|
<a-space>
|
|
<a-button v-has="'admin:sysRole:add'" type="primary" @click="handleAdd">
|
|
<icon-plus /> 新增</a-button>
|
|
<a-button v-has="'admin:sysRole:remove'" type="primary" status="danger" @click="() => { deleteVisible = true; }">
|
|
<icon-delete /> 批量删除</a-button>
|
|
<!-- <a-button type="primary" status="warning" disabled>
|
|
<icon-download /> 导出</a-button> -->
|
|
</a-space>
|
|
</div>
|
|
|
|
<a-table :columns="columns" :data="tableData"
|
|
:pagination="{ 'show-total': true, 'show-jumper': true, 'show-page-size': true, total: pager.total, current: currentPage }"
|
|
row-key="role_id" :row-selection="{ type: 'checkbox', showCheckedAll: true }"
|
|
@selection-change="(selection) => {deleteData = selection;}" @select="handleSelect"
|
|
@page-change="handlePageChange" @page-size-change="handlePageSizeChange">
|
|
<template #role_id="{record,rowIndex}">
|
|
<div>{{(rowIndex+1)+(pager.page-1)*10}}</div>
|
|
</template>
|
|
<template #status="{ record }">
|
|
<a-space direction="vertical" size="large">
|
|
<a-switch v-model="record.role_status" :checked-value="1" :unchecked-value="2"
|
|
@change="handleChangeSwitch($event,record.role_id)" :disabled="record.is_admin==1" />
|
|
</a-space>
|
|
<!-- <a-tag v-if="record.status == 2" color="green">正常</a-tag>
|
|
<a-tag v-else color="red">停用</a-tag> -->
|
|
</template>
|
|
<template #is_admin="{ record }">
|
|
<a-tag v-if="record.is_admin == 0" color="green">否</a-tag>
|
|
<a-tag v-else color="red">是</a-tag>
|
|
</template>
|
|
<template #createdAt="{ record }">
|
|
{{ parseTime(record.createdAt) }}
|
|
</template>
|
|
<template #action="{ record }">
|
|
<a-space>
|
|
<a-button v-has="'admin:sysRole:edit'" type="text" @click="handleUpdate(record)">
|
|
<icon-edit /> 修改</a-button>
|
|
<!-- <a-button type="text" @click="handleDataScope(record)">
|
|
<icon-check-circle /> 数据权限 </a-button> -->
|
|
<a-button v-has="'admin:sysRole:remove'" type="text" @click="() => { deleteVisible = true; deleteData = [record.role_id]; }">
|
|
<icon-check-circle /> 删除 </a-button>
|
|
</a-space>
|
|
</template>
|
|
</a-table>
|
|
|
|
<!-- Role Modal -->
|
|
<a-modal v-model:visible="modalVisible" :title="title" title-align="start" @before-ok="handleBeforeOk"
|
|
@close="handleCancel">
|
|
<a-form :model="modalForm" :rules="rules" ref="modalFormRef">
|
|
<a-form-item field="role_name" label="角色名称">
|
|
<a-input v-model="modalForm.role_name" placeholder="请输入角色名称" />
|
|
</a-form-item>
|
|
<!-- <a-form-item field="roleKey" label="权限字符">
|
|
<a-input v-model="modalForm.roleKey" placeholder="请输入权限字符" />
|
|
</a-form-item>
|
|
<a-form-item field="roleSort" label="角色排序">
|
|
<a-input-number
|
|
v-model="modalForm.roleSort"
|
|
mode="button"
|
|
:default-value="0"
|
|
:style="{ width: '150px' }"
|
|
/>
|
|
</a-form-item> -->
|
|
<!-- <a-form-item field="status" label="状态">
|
|
<a-radio-group v-model="modalForm.role_status">
|
|
<a-radio :value="2">正常</a-radio>
|
|
<a-radio :value="1">停用</a-radio>
|
|
</a-radio-group>
|
|
</a-form-item> -->
|
|
<a-form-item field="is_admin" label="是否是管理员">
|
|
<a-radio-group v-model="modalForm.is_admin">
|
|
<a-radio :value="0">否</a-radio>
|
|
<a-radio :value="1">是</a-radio>
|
|
</a-radio-group>
|
|
</a-form-item>
|
|
<a-form-item label="权限设置">
|
|
<a-tree
|
|
v-model:checked-keys="checkedKeys"
|
|
:checkable="true"
|
|
:check-strictly="false"
|
|
:data="treeData"
|
|
ref="tree"
|
|
checked-strategy="all"
|
|
@check="checkTree"
|
|
:only-check-leaf="true"
|
|
:default-expand-all="true"
|
|
:field-names="{ key: 'menu_id', title: 'menu_title',icon: '_'}"
|
|
/>
|
|
</a-form-item>
|
|
<!--
|
|
<a-form-item field="remark" label="备注">
|
|
<a-textarea v-model="modalForm.remark" placeholder="请输入备注内容" />
|
|
</a-form-item>
|
|
-->
|
|
</a-form>
|
|
</a-modal>
|
|
|
|
<!-- DataScope Modal -->
|
|
<!-- <a-modal v-model:visible="scopedModalVisible" :title="title" title-align="start" @before-ok="handleScopeBeforeOk"
|
|
@close="handleCancel">
|
|
<a-form :model="scopeForm">
|
|
<a-form-item field="role_name" label="角色名称">
|
|
<a-input v-model="scopeForm.role_name" disabled />
|
|
</a-form-item>
|
|
<a-form-item field="roleKey" label="权限字符">
|
|
<a-input v-model="scopeForm.roleKey" disabled />
|
|
</a-form-item>
|
|
<a-form-item field="dataScope" label="权限范围">
|
|
<a-select v-model="scopeForm.dataScope" placeholder="请选择权限范围">
|
|
<a-option v-for="item in dataScopeOptions" :key="item.value" :value="item.value" :label="item.label" />
|
|
</a-select>
|
|
</a-form-item>
|
|
</a-form>
|
|
</a-modal> -->
|
|
|
|
<!-- Akiraka 20230223 删除与批量删除 开始 -->
|
|
<DeleteModal :data="deleteData" :visible="deleteVisible" :delType="'role_ids'" :apiDelete="removeRole"
|
|
@deleteVisibleChange="() => deleteVisible = false" />
|
|
<!-- Akiraka 20230223 删除与批量删除 结束 -->
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
onMounted,
|
|
reactive,
|
|
ref,
|
|
getCurrentInstance,
|
|
nextTick,
|
|
watch,
|
|
shallowRef
|
|
} from 'vue';
|
|
import {
|
|
getRole,
|
|
addRole,
|
|
updateRole,
|
|
removeRole,
|
|
updateRoleScoped,
|
|
getRoleMenuTree,
|
|
roleDetail,
|
|
roleStatus
|
|
} from '@/api/admin/role';
|
|
|
|
// Akiraka 20230210 删除数据
|
|
const deleteData = ref([])
|
|
// Akiraka 20230210 删除对话框
|
|
const deleteVisible = ref(false)
|
|
// Akiraka 20230210 监听删除事件
|
|
watch(() => deleteVisible.value, (value) => {
|
|
if (value == false) {
|
|
getRoleInfo({
|
|
...pager,
|
|
...queryForm
|
|
});
|
|
}
|
|
})
|
|
|
|
const {
|
|
proxy
|
|
} = getCurrentInstance();
|
|
|
|
const currentPage = ref(1);
|
|
// Pager
|
|
const pager = {
|
|
total: 1,
|
|
page: 1,
|
|
page_size: 10,
|
|
};
|
|
|
|
// Batch Delete List
|
|
const batchDeleteList = ref([]);
|
|
const allCheckKeys=ref([]);
|
|
|
|
// Form
|
|
const queryForm = reactive({});
|
|
const modalForm = reactive({
|
|
sort: 0,
|
|
role_status: '',
|
|
is_admin: '',
|
|
menu_ids:[]
|
|
});
|
|
const scopeForm = reactive({});
|
|
|
|
// rules
|
|
const rules = {
|
|
role_name: [{
|
|
required: true,
|
|
message: '请输入角色名称'
|
|
}],
|
|
roleKey: [{
|
|
required: true,
|
|
message: '请输入权限字符'
|
|
}],
|
|
};
|
|
|
|
// ScopeOption
|
|
const dataScopeOptions = [{
|
|
value: '1',
|
|
label: '全部数据权限',
|
|
},
|
|
{
|
|
value: '2',
|
|
label: '自定数据权限',
|
|
},
|
|
{
|
|
value: '3',
|
|
label: '本部门数据权限',
|
|
},
|
|
{
|
|
value: '4',
|
|
label: '本部门及以下数据权限',
|
|
},
|
|
{
|
|
value: '5',
|
|
label: '仅本人数据权限',
|
|
},
|
|
];
|
|
|
|
// Table Columns
|
|
const columns = [{
|
|
title: '编号',
|
|
dataIndex: 'role_id',
|
|
slotName: 'role_id'
|
|
},
|
|
{
|
|
title: '角色名称',
|
|
dataIndex: 'role_name'
|
|
},
|
|
{
|
|
title: '状态',
|
|
dataIndex: 'role_status',
|
|
slotName: 'status'
|
|
},
|
|
{
|
|
title: '是否是管理员',
|
|
dataIndex: 'is_admin',
|
|
slotName: 'is_admin'
|
|
},
|
|
{
|
|
title: '创建时间',
|
|
dataIndex: 'created_at',
|
|
slotName: 'created_at'
|
|
},
|
|
{
|
|
title: '操作',
|
|
slotName: 'action',
|
|
width: 250
|
|
},
|
|
];
|
|
|
|
// Table Data;
|
|
const tableData = ref([]);
|
|
|
|
// Tree Data;
|
|
const checkedKeys = ref([]);
|
|
const treeData = ref([]);
|
|
|
|
// Modal
|
|
const modalVisible = ref(false);
|
|
const scopedModalVisible = ref(false);
|
|
const title = ref('默认标题');
|
|
|
|
// Table Select
|
|
const handleSelect = (rowKeys,rowkey,record) => {
|
|
console.log(rowKeys,rowkey);
|
|
batchDeleteList.value = rowKeys;
|
|
};
|
|
|
|
// 查询
|
|
const handleQuery = async () => {
|
|
const res = await getRole({
|
|
...pager,
|
|
...queryForm
|
|
});
|
|
const {
|
|
total,
|
|
data,
|
|
page,
|
|
page_size
|
|
} = res.data;
|
|
tableData.value =data;
|
|
Object.assign(pager, {
|
|
total,
|
|
page,
|
|
page_size
|
|
});
|
|
};
|
|
const tree=ref(null);
|
|
const checkTree=(checkedKeys,data)=>{
|
|
allCheckKeys.value=checkedKeys.concat(data.halfCheckedKeys);
|
|
console.log(allCheckKeys.value);
|
|
// if(data.checked){
|
|
// console.log(data.node.parent_id)
|
|
// tree.value.selectNode(data.node.parent_id,true);
|
|
// }
|
|
// console.log(checkedKeys);
|
|
// console.log(data);
|
|
|
|
}
|
|
// 重置查询
|
|
const handleResetQuery = () => {
|
|
proxy.$refs.queryFormRef.resetFields();
|
|
getRoleInfo(queryForm);
|
|
};
|
|
|
|
// 创建
|
|
const handleAdd = () => {
|
|
modalVisible.value = true;
|
|
title.value = '创建角色';
|
|
modalForm.is_admin='';
|
|
modalForm.role_status='';
|
|
};
|
|
|
|
// 修改角色
|
|
const handleUpdate = async (record) => {
|
|
modalVisible.value = true;
|
|
title.value = '修改角色';
|
|
const { code, data, message } = await roleDetail(record.role_id);
|
|
if (code == 200) {
|
|
Object.assign(modalForm, data);
|
|
allCheckKeys.value=data.menu_ids;
|
|
//过滤掉父级节点
|
|
const res2 = data.menu_ids.filter(item1 => !allParentId.some(item2 => item2 === item1))
|
|
checkedKeys.value = res2;
|
|
|
|
|
|
} else {
|
|
proxy.$notification.error(message);
|
|
}
|
|
//await nextTick();
|
|
//Object.assign(modalForm, record);
|
|
|
|
// const menuIdsChecked = [];
|
|
// data.menu_ids.forEach((item) => {
|
|
// menuIdsChecked.push(item);
|
|
// });
|
|
// checkedKeys.value = menuIdsChecked;
|
|
};
|
|
|
|
// 分配数据权限
|
|
const handleDataScope = async (record) => {
|
|
scopedModalVisible.value = true;
|
|
title.value = '分配数据权限';
|
|
|
|
const {
|
|
roleKey,
|
|
role_name,
|
|
dataScope,
|
|
roleId
|
|
} = record;
|
|
await nextTick();
|
|
Object.assign(scopeForm, {
|
|
roleKey,
|
|
role_name,
|
|
dataScope,
|
|
roleId
|
|
});
|
|
};
|
|
|
|
/**
|
|
* 分页改变
|
|
* @param {Number} [page]
|
|
*/
|
|
const handlePageChange = (page) => {
|
|
pager.page = page;
|
|
|
|
// 修改当前页码
|
|
currentPage.value = page;
|
|
getRoleInfo({
|
|
...pager,
|
|
...queryForm
|
|
});
|
|
};
|
|
|
|
// 每页数据量
|
|
const handlePageSizeChange = (page_size) => {
|
|
pager.page_size = page_size;
|
|
getRoleInfo({
|
|
...pager,
|
|
...queryForm
|
|
});
|
|
};
|
|
|
|
// 角色管理表单提交
|
|
// 异步关闭表单需要使用 done() 回调函数
|
|
const handleBeforeOk = (done) => {
|
|
proxy.$refs.modalFormRef.validate(async (valid) => {
|
|
// 如果 valid 为空则数据校验通过
|
|
if (!valid) {
|
|
modalForm.menu_ids= allCheckKeys.value;
|
|
let res;
|
|
if (modalForm.role_id) {
|
|
const {
|
|
code,
|
|
message
|
|
} = await updateRole(modalForm, modalForm.role_id);
|
|
if (code == 200) {
|
|
proxy.$notification.success('更新成功');
|
|
} else {
|
|
proxy.$notification.error(message);
|
|
}
|
|
} else {
|
|
//modalForm.is_admin = modalForm.is_admin ? Number(modalForm.is_admin) : ''
|
|
console.log(modalForm);
|
|
const {
|
|
code,
|
|
message
|
|
} = await addRole(modalForm);
|
|
if (code == 200) {
|
|
proxy.$notification.success('新增成功');
|
|
} else {
|
|
proxy.$notification.error(message);
|
|
}
|
|
}
|
|
getRoleInfo();
|
|
done();
|
|
} else {
|
|
proxy.$message.error('数据校验失败');
|
|
done(false);
|
|
}
|
|
});
|
|
};
|
|
|
|
// 数据权限表单提交
|
|
const handleScopeBeforeOk = async (done) => {
|
|
const res = await updateRoleScoped(scopeForm);
|
|
proxy.$message.success(res.msg);
|
|
done();
|
|
|
|
getRoleInfo();
|
|
};
|
|
|
|
// 重置数据表单
|
|
const handleCancel = () => {
|
|
modalVisible.value = false;
|
|
modalForm.role_id = null;
|
|
scopeForm.role_id = null;
|
|
checkedKeys.value = [];
|
|
proxy.$refs.modalFormRef.resetFields();
|
|
};
|
|
//切换启用状态
|
|
const handleChangeSwitch = async (value, id) => {
|
|
const { code, data, message } = await roleStatus({ role_status: value },id);
|
|
if (code == 200) {
|
|
value==1?proxy.$notification.success('启用成功'):proxy.$notification.success('禁用成功');
|
|
} else {
|
|
proxy.$notification.error(message);
|
|
}
|
|
|
|
}
|
|
// 获取角色信息
|
|
const getRoleInfo = async (params = {
|
|
page: 1,
|
|
role_name: '',
|
|
page_size: 10
|
|
}) => {
|
|
const {
|
|
data,
|
|
code,
|
|
message
|
|
} = await getRole(params);
|
|
if (code == 200) {
|
|
|
|
tableData.value = data.data;
|
|
Object.assign(pager, {
|
|
total: data.total,
|
|
page: data.page,
|
|
page_size: data.page_size
|
|
});
|
|
} else {
|
|
proxy.$notification.error(message);
|
|
}
|
|
};
|
|
let allParentId=[];
|
|
const getId=(arr)=>{
|
|
arr.forEach((item)=>{
|
|
if(item.children){
|
|
allParentId.push(item.menu_id);
|
|
getId(item.children);
|
|
}
|
|
});
|
|
};
|
|
// 获取角色菜单信息
|
|
const getRoleMenuTreeInfo = async () => {
|
|
const res = await getRoleMenuTree();
|
|
|
|
treeData.value = res.data;
|
|
getId(res.data);
|
|
console.log(allParentId);
|
|
|
|
|
|
};
|
|
|
|
onMounted(() => {
|
|
getRoleInfo();
|
|
getRoleMenuTreeInfo();
|
|
});
|
|
</script>
|
|
|
|
<style setup>
|
|
.action {
|
|
margin-bottom: 12px;
|
|
}
|
|
</style> |