504 lines
14 KiB
Vue
504 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 type="primary" @click="handleAdd">
|
||
<icon-plus /> 新增</a-button>
|
||
<a-button 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 type="text" @click="handleUpdate(record)">
|
||
<icon-edit /> 修改</a-button>
|
||
<!-- <a-button type="text" @click="handleDataScope(record)">
|
||
<icon-check-circle /> 数据权限 </a-button> -->
|
||
<a-button 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>
|
||
<div>{{checkedKeys}}</div>
|
||
<a-form-item label="权限设置">
|
||
<a-tree
|
||
v-model:checked-keys="checkedKeys"
|
||
:checkable="true"
|
||
:check-strictly="false"
|
||
:data="treeData"
|
||
: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
|
||
} 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([]);
|
||
|
||
// Form
|
||
const queryForm = reactive({});
|
||
const modalForm = reactive({
|
||
sort: 0,
|
||
role_status: '',
|
||
is_admin: ''
|
||
});
|
||
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 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);
|
||
checkedKeys.value = data.menu_ids;
|
||
// console.log(data.menu_ids)
|
||
// 显示勾选的菜单，checkedKeys 传入id数组即可
|
||
|
||
} 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) {
|
||
console.log(checkedKeys.value);
|
||
modalForm.menu_ids = checkedKeys.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);
|
||
}
|
||
};
|
||
|
||
// 获取角色菜单信息
|
||
const getRoleMenuTreeInfo = async () => {
|
||
const res = await getRoleMenuTree();
|
||
|
||
treeData.value = res.data;
|
||
console.log(res.data)
|
||
|
||
};
|
||
|
||
onMounted(() => {
|
||
getRoleInfo();
|
||
getRoleMenuTreeInfo();
|
||
});
|
||
</script>
|
||
|
||
<style setup>
|
||
.action {
|
||
margin-bottom: 12px;
|
||
}
|
||
</style> |