feat: 角色管理

src/api/system/role.ts

@@ -0,0 +1,3 @@
+import server from '@/utils/request';
+
+export const getRoleList_api = (data: any): Promise<any> => server.post(`/role/_query/`, data);

src/components/Search/Search.vue

@@ -71,7 +71,7 @@
       </div>
     </div>
   </div>
-</template>
+</template> 
 
 <script setup lang='ts' name='Search'>
 import SearchItem from './Item.vue'

src/router/menu.ts

@@ -101,7 +101,10 @@ export default [
         path:'/system/api',
         component: ()=>import('@/views/system/apiPage/index.vue')
     },
-
+    {
+        path:'/system/Role',
+        component: ()=>import('@/views/system/Role/index.vue')
+    },
     // 初始化
     {
       path: '/init-home',

src/views/system/Role/components/AddDialog.vue

@@ -0,0 +1,27 @@
+<template>
+    <a-modal
+        v-model:visible="dialog.visible"
+        title="新增"
+        @ok="dialog.handleOk"
+    >
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+    </a-modal>
+</template>
+
+<script setup lang="ts">
+const emits = defineEmits(['refresh']);
+const props = defineProps({
+    open: Number,
+});
+
+const dialog = reactive({
+    visible: false,
+    handleOk: () => {
+        emits('refresh');
+    },
+});
+</script>
+
+<style scoped></style>

src/views/system/Role/index.vue

@@ -0,0 +1,124 @@
+<template>
+    <a-card class="role-container">
+        <Search :columns="query.columns" />
+
+        <JTable
+            :ref="tableRef"
+            :columns="table.columns"
+            :request="getRoleList_api"
+            model="TABLE"
+            :params="query.params"
+        >
+            <template #headerTitle>
+                <a-button type="primary" @click="table.clickAdd"
+                    ><plus-outlined />新增</a-button
+                >
+            </template>
+
+            <template #action="slotProps">
+                <a-space :size="16">
+                    <a-tooltip>
+                        <template #title>编辑</template>
+                        <a-button
+                            style="padding: 0"
+                            type="link"
+                            @click="table.clickEdit(slotProps)"
+                        >
+                            <edit-outlined />
+                        </a-button>
+                    </a-tooltip>
+                    <a-popconfirm
+                        title="确定要删除吗？"
+                        ok-text="确定"
+                        cancel-text="取消"
+                        @confirm="table.clickDel(slotProps)"
+                    >
+                        <a-tooltip>
+                            <template #title>删除</template>
+                            <a-button style="padding: 0" type="link">
+                                <delete-outlined />
+                            </a-button>
+                        </a-tooltip>
+                    </a-popconfirm>
+                </a-space>
+            </template>
+        </JTable>
+    </a-card>
+</template>
+
+<script setup lang="ts" name="Role">
+import {
+    EditOutlined,
+    DeleteOutlined,
+    PlusOutlined,
+} from '@ant-design/icons-vue';
+import { getRoleList_api } from '@/api/system/role';
+
+// 筛选
+const query = reactive({
+    columns: [
+        {
+            title: '标识',
+            dataIndex: 'id',
+            key: 'id',
+            ellipsis: true,
+            fixed: 'left',
+        },
+        {
+            title: '名称',
+            dataIndex: 'name',
+            key: 'name',
+            ellipsis: true,
+        },
+        {
+            title: '描述',
+            key: 'description',
+            ellipsis: true,
+            dataIndex: 'description',
+            filters: true,
+            onFilter: true,
+        },
+        {
+            title: '操作',
+            valueType: 'option',
+            width: 200,
+            fixed: 'right',
+        },
+    ],
+    params: {},
+});
+// 表格
+const tableRef = ref();
+const table = reactive({
+    columns: [
+        {
+            title: '标识',
+            dataIndex: 'id',
+            key: 'id',
+        },
+        {
+            title: '名称',
+            dataIndex: 'name',
+            key: 'name',
+        },
+        {
+            title: '说明',
+            dataIndex: 'description',
+            key: 'description',
+        },
+        {
+            title: '操作',
+            dataIndex: 'action',
+            key: 'action',
+            scopedSlots: true,
+        },
+    ],
+    tableData: [],
+    clickAdd: () => {},
+    clickDel: (row: any) => {},
+    clickEdit: (row: any) => {},
+});
+
+</script>
+
+<style lang="less" scoped></style>