134 lines
2.6 KiB
Vue
134 lines
2.6 KiB
Vue
<template>
|
||
<BreadPage>
|
||
<Table v-bind="table"></Table>
|
||
</BreadPage>
|
||
</template>
|
||
|
||
<script setup lang="tsx">
|
||
import { api } from "@/api";
|
||
import { Table, useTable } from "@/components";
|
||
import { dayjs } from "@/plugins";
|
||
|
||
const table = useTable({
|
||
data: async (model, paging) => {
|
||
return api.permission.getPermissions();
|
||
},
|
||
columns: [
|
||
{
|
||
type: "index",
|
||
},
|
||
{
|
||
title: "权限名称",
|
||
dataIndex: "username",
|
||
width: 200,
|
||
render({ record }) {
|
||
return (
|
||
<div class="flex flex-col overflow-hidden">
|
||
<span>{record.name}</span>
|
||
<span class="text-gray-400 text-xs truncate">标识：{record.slug}</span>
|
||
</div>
|
||
);
|
||
},
|
||
},
|
||
{
|
||
title: "权限描述",
|
||
dataIndex: "description",
|
||
},
|
||
{
|
||
title: "创建时间",
|
||
dataIndex: "createdAt",
|
||
width: 200,
|
||
render: ({ record }) => dayjs(record.createdAt).format(),
|
||
},
|
||
{
|
||
title: "操作",
|
||
type: "button",
|
||
width: 70,
|
||
buttons: [
|
||
{
|
||
type: "modify",
|
||
text: "修改",
|
||
},
|
||
],
|
||
},
|
||
],
|
||
common: {
|
||
items: [
|
||
{
|
||
field: "name",
|
||
label: "角色名称",
|
||
type: "input",
|
||
required: true,
|
||
},
|
||
{
|
||
field: "slug",
|
||
label: "角色标识",
|
||
type: "input",
|
||
},
|
||
{
|
||
field: "description",
|
||
label: "个人描述",
|
||
type: "input",
|
||
},
|
||
{
|
||
field: "permissions",
|
||
label: "关联角色",
|
||
type: "select",
|
||
options: () => api.permission.getPermissions(),
|
||
component: ({ item }) => {
|
||
return (
|
||
<div class="flex flex-col">
|
||
<span>关联角色</span>
|
||
<div>
|
||
<span></span>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
},
|
||
],
|
||
modalProps: {
|
||
width: 580,
|
||
maskClosable: false,
|
||
},
|
||
formProps: {
|
||
layout: "vertical",
|
||
},
|
||
},
|
||
search: {
|
||
items: [
|
||
{
|
||
field: "name",
|
||
label: "权限名称",
|
||
type: "input",
|
||
required: false,
|
||
},
|
||
],
|
||
},
|
||
create: {
|
||
title: "添加权限",
|
||
submit: ({ model }) => {
|
||
return api.permission.addPermission(model as any);
|
||
},
|
||
},
|
||
modify: {
|
||
title: "修改权限",
|
||
submit: ({ model }) => {
|
||
return api.permission.updatePermission(model.id, model);
|
||
},
|
||
},
|
||
});
|
||
</script>
|
||
|
||
<style scoped></style>
|
||
|
||
<route lang="json">
|
||
{
|
||
"meta": {
|
||
"sort": 10303,
|
||
"title": "权限管理",
|
||
"icon": "icon-park-outline-permissions"
|
||
}
|
||
}
|
||
</route>
|