开源准备

frontend/src/views/system/role/PermissionDrawer.vue

@@ -0,0 +1,223 @@
+<template>
+    <!-- 授权弹窗 -->
+    <a-drawer v-model:open="openDrawer" :destroyOnClose="true" :title="`授权 - ${currentRole?.name || ''}`" placement="right" :width="1500"
+        :bodyStyle="{ padding: 'none' }">
+        <template #extra>
+            <a-button type="primary" @click="handleDrawerSave" :loading="drawerSaving">保存</a-button>
+        </template>
+
+        <div style="display: flex;">
+            <div style="min-width: 300px;">
+                <div style="display: flex; gap: 10px; ">
+                    <div style="width: 10px; background-color: #1677ff;"></div>
+                    <div>
+                        <span style="font-size: 16px;">数据授权</span>
+                        <a-tooltip placement="right">
+                            <template #title>
+                                <span>授权用户可操作的数据范围</span>
+                            </template>
+                            <QuestionCircleOutlined style="margin-left: 5px;" />
+                        </a-tooltip>
+                    </div>
+                </div>
+
+                <a-select v-model:value="permissionState.data_scope" style="width: 80%; margin-top: 15px;">
+                    <a-select-option :value="1">仅本人数据权限</a-select-option>
+                    <a-select-option :value="2">本部门数据权限</a-select-option>
+                    <a-select-option :value="3">本部门及以下数据权限</a-select-option>
+                    <a-select-option :value="4">全部数据权限</a-select-option>
+                    <a-select-option :value="5">自定义数据权限</a-select-option>
+                </a-select>
+
+                <a-tree v-if="permissionState.data_scope === 5 && deptTreeData.length"
+                    :checkedKeys="permissionState.dept_ids"
+                    :rowKey="record => record.id"
+                    :tree-data="deptTreeData"
+                    :defaultExpandAll="true"
+                    :field-names="{ children: 'children', title: 'name', key: 'id' }"
+                    @check="deptTreeCheck" checkable checkStrictly style="margin-top: 15px;" />
+            </div>
+
+            <a-divider type="vertical" style="height: 80vh;" />
+
+            <div>
+                <div style="display: flex; gap: 10px;">
+                    <div style="width: 10px; background-color: #1677ff;"></div>
+                    <div>
+                        <span style="font-size: 16px;">菜单授权</span>
+                        <a-tooltip placement="right">
+                            <template #title>
+                                <span>授权用户在菜单中可操作的范围</span>
+                            </template>
+                            <QuestionCircleOutlined style="margin-left: 5px;" />
+                        </a-tooltip>
+                    </div>
+                </div>
+
+                <div style="margin-top: 15px;">
+                    <a-table :rowKey="record => record.id"
+                        :columns="menuColumns"
+                        :data-source="menuTreeData"
+                        :row-selection="menuRowSelection"
+                        :loading="tableLoading"
+                        :scroll="{ x: 500, y: 'calc(100vh - 270px)' }"
+                        :pagination="false"
+                        :style="{ minHeight: '700px' }"
+                        :expandAll="true">
+                        <template v-slot:bodyCell="{ column, record }">
+                            <template v-if="column.dataIndex === 'type'">
+                                <a-tag :color="record.type === 1 ? 'blue' : (record.type === 2 ? 'green' : 'orange')">
+                                    {{ record.type === 1 ? '目录' : (record.type === 2 ? '功能' : '权限') }}
+                                </a-tag>
+                            </template>
+                            <template v-if="column.dataIndex === 'available'">
+                                <span><a-badge :color="record.available ? 'green' : 'red'" /> {{ record.available ? '启用'
+                                    : '禁用' }}
+                                </span>
+                            </template>
+                        </template>
+                    </a-table>
+                </div>
+            </div>
+        </div>
+
+        <template #footer>
+            <div style="height: 50px;"></div>
+        </template>
+    </a-drawer>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed } from 'vue';
+import { listToTree } from '@/utils/util';
+import { message } from 'ant-design-vue';
+import type { TableColumnsType } from 'ant-design-vue';
+import { QuestionCircleOutlined } from '@ant-design/icons-vue';
+import type { tableDataType, permissionDataType, permissionDeptType, permissionMenuType } from './types'
+import { getMenuList } from '@/api/system/menu';
+import { getDeptList } from '@/api/system/dept';
+import { setPermission } from '@/api/system/role';
+
+const openDrawer = ref(false);
+const currentRole = ref(null);
+const permissionState = ref<permissionDataType>({
+    role_ids: [],
+    menu_ids: [],
+    data_scope: 1,
+    dept_ids: []
+});
+
+const deptTreeData = ref<permissionDeptType[]>([]);
+const menuTreeData = ref<permissionMenuType[]>([]);
+const tableLoading = ref(false);
+const drawerSaving = ref(false);
+
+const menuColumns: TableColumnsType = [
+    {
+        title: '菜单名称',
+        dataIndex: 'name'
+    },
+    {
+        title: '菜单类型',
+        dataIndex: 'type',
+        width: 100
+    },
+    {
+        title: '权限标识',
+        dataIndex: 'permission',
+    },
+    {
+        title: '状态',
+        dataIndex: 'available',
+        width: 100
+    },
+    {
+        title: '备注',
+        dataIndex: 'description',
+        ellipsis: true,
+        width: 400
+    }
+];
+
+// 初始化方法,用于打开抽屉并加载数据
+const init = async (record: tableDataType) => {
+    if (!record) {
+        message.error('请选择角色')
+        return
+    }
+
+    openDrawer.value = true;
+    tableLoading.value = true;
+
+    try {
+        // 获取部门树
+        const deptResponse = await getDeptList();
+        deptTreeData.value = listToTree(deptResponse.data.data.items);
+
+        // 获取菜单树
+        const menuResponse = await getMenuList();
+        menuTreeData.value = listToTree(menuResponse.data.data.items);
+
+        currentRole.value = record;
+
+        // 初始化权限状态
+        permissionState.value = {
+            role_ids: [record.id],
+            menu_ids: record.menus?.map(menu => menu.id) || [],
+            data_scope: record.data_scope || 1,
+            dept_ids: record.depts?.map(dept => dept.id) || []
+        }
+
+    } catch (error) {
+        console.error('获取权限数据失败:', error);
+        message.error('获取权限数据失败');
+    } finally {
+        tableLoading.value = false;
+    }
+}
+
+// 部门树选择回调
+const deptTreeCheck = (checkedKeys) => {
+    permissionState.value.dept_ids = checkedKeys.checked;
+}
+
+const emit = defineEmits(['event']);
+
+// 保存权限设置
+const handleDrawerSave = () => {
+    drawerSaving.value = true;
+
+    setPermission(permissionState.value).then(response => {
+        message.success(response.data.msg);
+        drawerSaving.value = false;
+        openDrawer.value = false;
+        emit('event');
+    }).catch(error => {
+        console.error('保存权限失败:', error);
+        message.error('保存权限失败');
+        drawerSaving.value = false;
+    })
+}
+
+// 菜单选择变更回调
+const onMenuSelectChange = (selectingRowKeys: permissionMenuType['id'][]) => {
+    permissionState.value.menu_ids = selectingRowKeys;
+}
+
+// 菜单表格选择配置
+const menuRowSelection = computed(() => {
+    return {
+        selectedRowKeys: permissionState.value.menu_ids,
+        checkStrictly: true,
+        onChange: onMenuSelectChange
+    }
+});
+
+defineExpose({
+    init,
+    permissionState
+});
+
+</script>
+
+<style lang="scss" scoped></style>

frontend/src/views/system/role/index.vue

@@ -0,0 +1,498 @@
+<template>
+  <div>
+    <!-- 页面头部 -->
+    <page-header />
+
+    <!-- 表格搜索 -->
+    <div class="table-search-wrapper">
+      <a-card :bordered="false">
+        <a-form :model="queryState" @finish="onFinish">
+          <a-row>
+            <a-col flex="0 1 450px">
+              <a-form-item name="name" label="名称" style="max-width: 300px;">
+                <a-input v-model:value="queryState.name" placeholder="请输入名称" allowClear></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col flex="0 1 450px">
+              <a-form-item name="available" label="状态" style="max-width: 300px;">
+                <a-select v-model:value="queryState.available" placeholder="全部" allowClear>
+                  <a-select-option value="true">启用</a-select-option>
+                  <a-select-option value="false">停用</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row>
+            <a-col>
+              <a-button type="primary" html-type="submit" :loading="tableLoading">查询</a-button>
+              <a-button style="margin: 0 8px" @click="resetFields">重置</a-button>
+            </a-col>
+          </a-row>
+        </a-form>
+      </a-card>
+    </div>
+
+    <!-- 表格区域 -->
+    <div class="table-wrapper">
+      <a-card title="角色列表" 
+        :bordered="false" 
+        :headStyle="{ borderBottom: 'none', padding: '20px 24px' }"
+        :bodyStyle="{ padding: '0 24px', minHeight: 'calc(100vh - 400px)' }">
+        <template #extra>
+          <a-button type="primary" :icon="h(PlusOutlined)" @click="modalHandle('create')"
+            style="margin-right: 10px;">
+            新建
+          </a-button>
+          <a-button type="primary" :icon="h(DownOutlined)" @click="handleExport"
+            style="margin-right: 10px;">
+            导出
+          </a-button>
+          <a-dropdown>
+            <template #overlay>
+              <a-menu @click="handleMoreClick">
+                <a-menu-item key="1"><span style="margin-right: 10px;">
+                    <CheckOutlined />
+                  </span><span>批量启用</span></a-menu-item>
+                <a-menu-item key="2"><span style="margin-right: 10px;">
+                    <StopOutlined />
+                  </span><span>批量停用</span></a-menu-item>
+              </a-menu>
+            </template>
+            <a-button>更多
+              <DownOutlined />
+            </a-button>
+          </a-dropdown>
+        </template>
+        <a-table :rowKey="record => record.id" 
+          :columns="columns" 
+          :data-source="dataSource"
+          :row-selection="rowSelection" 
+          :loading="tableLoading" 
+          @change="handleTableChange"
+          :scroll="{ x: 500, y: 'calc(100vh - 500px)' }" 
+          :pagination="pagination" 
+          :style="{ minHeight: '500px' }">
+          <template #bodyCell="{ column, record, index }">
+            <template v-if="column.dataIndex === 'index'">
+              <span>{{ (pagination.current - 1) * pagination.pageSize + index + 1 }}</span>
+            </template>
+            <template v-if="column.dataIndex === 'name'">
+              <span :style="{ color: !record.available ? 'rgb(255, 77, 79)' : 'rgba(0, 0, 0, .88)' }">
+                {{ record.name }}
+              </span>
+            </template>
+            <template v-if="column.dataIndex === 'available'">
+              <span><a-badge :color="record.available ? 'green' : 'red'" /> {{ record.available ? '启用' : '禁用' }}
+              </span>
+            </template>
+            <template v-if="column.dataIndex === 'operation'">
+              <a-space size="middle">
+                <a @click="modalHandle('view', index)">查看</a>
+                <a @click="modalHandle('update', index)">修改</a>
+                <a @click="modalHandle('permission', index)">授权</a>
+                <a-popconfirm title="确定删除吗？" ok-text="确定" cancel-text="取消" @confirm="deleteRow(record)">
+                  <a style="color: red;">删除</a>
+                </a-popconfirm>
+              </a-space>
+            </template>
+          </template>
+        </a-table>
+      </a-card>
+    </div>
+
+    <!-- 弹窗区域 -->
+    <div class="modal-wrapper">
+      <a-modal v-model:open="openModal" @ok="handleModalSumbit" :width="800" :destroyOnClose="true"
+        :confirmLoading="modalSubmitLoading" style="top: 30px">
+        <template #title>
+          <span>{{ modalTitle === 'create' ? '新建角色' : (modalTitle === 'view' ? '查看角色' : '修改角色') }}</span>
+        </template>
+        <div v-if="modalTitle === 'view'">
+          <a-spin :spinning="detailStateLoading">
+            <a-descriptions :column="{ xxl: 2, xl: 2, lg: 2, md: 2, sm: 1, xs: 1 }" :labelStyle="{ width: '140px' }"
+              bordered>
+              <a-descriptions-item label="序号">{{ (pagination.current - 1) * pagination.pageSize + detailState.index + 1 }}</a-descriptions-item>
+              <a-descriptions-item label="名称">{{ detailState.name }}</a-descriptions-item>
+              <a-descriptions-item label="排序">{{ detailState.order }}</a-descriptions-item>
+              <a-descriptions-item label="状态">
+                <a-badge :color="detailState.available ? 'green' : 'red'" />{{ detailState.available ? '启用' : '禁用' }}
+              </a-descriptions-item>
+              <a-descriptions-item label="创建人">{{ detailState.creator ? detailState.creator.name : '-' }}</a-descriptions-item>
+              <a-descriptions-item label="创建时间">{{ detailState.created_at }}</a-descriptions-item>
+              <a-descriptions-item label="修改时间">{{ detailState.updated_at }}</a-descriptions-item>
+              <a-descriptions-item label="备注" :span="2">{{ detailState.description }}</a-descriptions-item>
+            </a-descriptions>
+          </a-spin>
+        </div>
+        <div v-else-if="modalTitle === 'create'">
+          <a-form ref="createForm" :model="createState" v-bind="{ labelCol: { span: 5 }, wrapperCol: { span: 15 } }">
+            <a-form-item name="name" label="名称" :rules="[{ required: true, message: '请输入名称' }]">
+              <a-input v-model:value="createState.name" placeholder="请输入名称" allowClear></a-input>
+            </a-form-item>
+            <a-form-item name="order" label="排序" :rules="[{ required: true, message: '请输入排序' }]">
+              <a-input-number v-model:value="createState.order" :min="1" />
+            </a-form-item>
+            <a-form-item name="available" label="状态" :rules="[{ required: true, message: '请选择状态' }]">
+              <a-radio-group v-model:value="createState.available">
+                <a-radio :value="true">启用</a-radio>
+                <a-radio :value="false">停用</a-radio>
+              </a-radio-group>
+            </a-form-item>
+            <a-form-item name="description" label="备注">
+              <a-textarea v-model:value="createState.description" placeholder="请输入备注" :rows="4" allowClear />
+            </a-form-item>
+          </a-form>
+        </div>
+        <div v-else>
+          <a-form ref="updateForm" :model="updateState" v-bind="{ labelCol: { span: 5 }, wrapperCol: { span: 15 } }">
+            <a-form-item name="name" label="名称" :rules="[{ required: true, message: '请输入名称' }]">
+              <a-input v-model:value="updateState.name" placeholder="请输入名称" allowClear></a-input>
+            </a-form-item>
+            <a-form-item name="order" label="排序" :rules="[{ required: true, message: '请输入排序' }]">
+              <a-input-number v-model:value="updateState.order" :min="1" />
+            </a-form-item>
+            <a-form-item name="available" label="状态" :rules="[{ required: true, message: '请选择状态' }]">
+              <a-radio-group v-model:value="updateState.available">
+                <a-radio :value="true">启用</a-radio>
+                <a-radio :value="false">停用</a-radio>
+              </a-radio-group>
+            </a-form-item>
+            <a-form-item name="description" label="备注">
+              <a-textarea v-model:value="updateState.description" placeholder="请输入备注" :rows="4" allowClear />
+            </a-form-item>
+          </a-form>
+        </div>
+      </a-modal>
+    </div>
+
+    <!-- 授权弹窗 -->
+    <PermissionDrawer ref="permissionDrawer" @event="handlePermissionDrawerEvent" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, computed, unref, onMounted, h } from 'vue';
+import { Table, message, Modal } from 'ant-design-vue';
+import type { TableColumnsType, MenuProps } from 'ant-design-vue';
+import { PlusOutlined, DownOutlined, CheckOutlined, StopOutlined } from '@ant-design/icons-vue';
+import { cloneDeep, isEmpty } from '@/utils/util';
+import PageHeader from '@/components/PageHeader.vue';
+import PermissionDrawer from './PermissionDrawer.vue'
+import type { searchDataType, tableDataType } from './types'
+import { getRoleList, createRole, updateRole, deleteRole, batchAvailableRole, exportRole } from '@/api/system/role'
+import XLSX from 'xlsx';
+
+const createForm = ref();
+const updateForm = ref();
+const tableLoading = ref(false);
+const openModal = ref(false);
+const permissionDrawer = ref();
+const modalTitle = ref('');
+const modalSubmitLoading = ref(false);
+const detailStateLoading = ref(false);
+const dataSource = ref<tableDataType[]>([]);
+const selectedRowKeys = ref<tableDataType['id'][]>([]);
+
+const queryState: searchDataType = reactive({
+  name: null,
+  available: null
+});
+const pagination = reactive({
+  current: 1,
+  pageSize: 10,
+  defaultPageSize: 10,
+  showSizeChanger: true,
+  total: dataSource.value.length,
+  showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条 / 总共 ${total} 条`
+})
+const createState = reactive<tableDataType>({
+  name: '',
+  order: 1,
+  available: true,
+  description: ''
+})
+const updateState = reactive<tableDataType>({
+  id: undefined,
+  name: '',
+  order: 1,
+  available: true,
+  description: ''
+})
+const detailState = ref<tableDataType>({})
+
+const columns = reactive<TableColumnsType>([
+  {
+    title: '序号',
+    dataIndex: 'index',
+    align: 'center',
+    width: 80
+  },
+  {
+    title: '名称',
+    dataIndex: 'name',
+    align: 'center',
+    // width: 80
+
+  },
+  {
+    title: '排序',
+    dataIndex: 'order',
+    align: 'center',
+    width: 80
+  },
+  {
+    title: '状态',
+    dataIndex: 'available',
+    align: 'center',
+    // width: 80
+  },
+  {
+    title: '备注',
+    dataIndex: 'description',
+    align: 'center',
+    ellipsis: true,
+    width: 150
+  },
+  {
+    title: '创建日期',
+    dataIndex: 'created_at',
+    align: 'center',
+    ellipsis: true,
+    // width: 120
+  },
+  {
+    title: '更新日期',
+    dataIndex: 'updated_at',
+    align: 'center',
+    ellipsis: true,
+    // width: 120
+  },
+  {
+    title: '操作',
+    dataIndex: 'operation',
+    align: 'center',
+    fixed: 'right',
+    width: 180
+  }
+]);
+
+const rowSelection = computed(() => {
+  return {
+    selectedRowKeys: unref(selectedRowKeys),
+    onChange: (selectingRowKeys: tableDataType['id'][]) => {
+      selectedRowKeys.value = selectingRowKeys;
+    },
+    hideDefaultSelections: true,
+    selections: [
+      Table.SELECTION_ALL,
+      Table.SELECTION_INVERT,
+      Table.SELECTION_NONE
+    ]
+  }
+});
+
+// 生命周期钩子
+onMounted(() => loadingData());
+
+// 查询
+const onFinish = () => {
+  pagination.current = 1;
+  loadingData();
+};
+
+// 加载表格数据
+const loadingData = () => {
+  tableLoading.value = true;
+
+  let params = {};
+  if (queryState.name) {
+    params['name'] = queryState.name
+  }
+  if (queryState.available) {
+    params['available'] = queryState.available == "true" ? true : false;
+  }
+  params['page_no'] = pagination.current
+  params['page_size'] = pagination.pageSize
+
+  getRoleList(params).then(response => {
+    const result = response.data;
+    dataSource.value = result.data.items;
+    pagination.total = result.data.total;
+    pagination.current = result.data.page_no;
+    pagination.pageSize = result.data.page_size;
+  }).catch(error => {
+    console.error(error);
+  }).finally(() => {
+    tableLoading.value = false;
+  })
+}
+
+// 重置查询
+const resetFields = () => {
+  Object.keys(queryState).forEach((key: string) => {
+    delete queryState[key];
+  });
+  pagination.current = 1;
+  queryState.available = null
+  loadingData();
+}
+
+// 删除
+const deleteRow = (row: tableDataType) => {
+  deleteRole({ id: row.id }).then(response => {
+    const result = response.data;
+    message.success(result.msg);
+    loadingData();
+
+  }).catch(error => {
+    console.log(error)
+  })
+}
+
+// 批量启用/停用
+const handleMoreClick: MenuProps['onClick'] = e => {
+  if (!selectedRowKeys.value || !(selectedRowKeys.value.length > 0)) {
+    message.warning('请先勾选数据');
+    return;
+  }
+
+  Modal.confirm({
+    title: '提示',
+    content: e.key == 1 ? '是否确定启用选择项？' : '是否确定停用选择项？',
+    onOk() {
+      const body = { ids: selectedRowKeys.value, available: e.key == 1 ? true : false };
+      batchAvailableRole(body).then(response => {
+        const result = response.data;
+        message.success(result.msg);
+        selectedRowKeys.value = [];
+        loadingData();
+      }).catch(error => {
+        console.log(error);
+      })
+    }
+  });
+}
+
+// 表格分页
+const handleTableChange = (values: any) => {
+  pagination.current = values.current;
+  pagination.pageSize = values.pageSize;
+  loadingData();
+}
+
+// 弹窗关键字处理
+const modalHandle = (modalType: string, index?: number) => {
+  modalTitle.value = modalType;
+  openModal.value = true;
+
+  if (modalType === 'view' && index !== undefined) {
+    detailStateLoading.value = true;
+
+    detailState.value = dataSource.value[index];
+    detailState.value.index = index;
+
+    detailStateLoading.value = false;
+
+  } else if (modalType === 'update' && index !== undefined) {
+    Object.keys(updateState).forEach(key => {
+      updateState[key] = dataSource.value[index][key];
+    })
+  } else if (modalType === 'permission' && index !== undefined) {
+    openModal.value = false;
+    permissionDrawer.value.init(dataSource.value[index]);
+  }
+}
+
+// 弹窗提交（详情/新建/修改）
+const handleModalSumbit = () => {
+  modalSubmitLoading.value = true;
+
+  if (modalTitle.value === 'view') {
+    modalSubmitLoading.value = false;
+    openModal.value = false;
+
+  } else if (modalTitle.value === 'create') {
+    createForm.value.validate().then(() => {
+      const createBody = cloneDeep(createState);
+      Object.keys(createBody).forEach(key => {
+        if (isEmpty(createBody[key])) {
+          delete createBody[key];
+        }
+      })
+
+      createRole(createBody).then(response => {
+        const result = response.data;
+        modalSubmitLoading.value = false;
+        openModal.value = false;
+        Object.keys(createState).forEach(key => delete createState[key]);
+        createState.order = 1;
+        message.success(result.msg);
+        loadingData();
+
+      }).catch(error => {
+        modalSubmitLoading.value = false;
+        console.log(error)
+      })
+
+    }).catch(error => {
+      modalSubmitLoading.value = false;
+      console.log(error)
+    })
+
+  } else if (modalTitle.value === 'update') {
+    updateForm.value.validate().then(() => {
+      updateRole(updateState).then(response => {
+        const result = response.data;
+        modalSubmitLoading.value = false;
+        openModal.value = false;
+        message.success(result.msg);
+        loadingData();
+
+      }).catch(error => {
+        modalSubmitLoading.value = false;
+        console.log(error)
+      })
+
+    }).catch(error => {
+      modalSubmitLoading.value = false;
+      console.log(error)
+    })
+  }
+}
+
+/** 导出按钮操作 */
+const handleExport = () => {
+  // 构建查询参数
+  const params = {
+    ...queryState,
+    page_no: 1,
+    page_size: pagination.total // 导出所有数据
+  };
+
+  // 调用 exportLog 接口
+  exportRole(params).then(response => {
+    const blob = new Blob([response.data], { type: 'application/vnd.ms-excel' });
+    const url = window.URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `role_${new Date().getTime()}.xlsx`; // 设置下载文件名
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    window.URL.revokeObjectURL(url);
+    message.success('导出成功');
+  }).catch(error => {
+    console.error('导出失败:', error);
+    message.error('导出失败');
+  });
+};
+
+// 授权弹窗事件
+const handlePermissionDrawerEvent = () => loadingData();
+</script>
+
+<style lang="scss" scoped>
+.table-search-wrapper {
+  margin-block-end: 16px;
+}
+</style>

frontend/src/views/system/role/types.ts

@@ -0,0 +1,51 @@
+export interface searchDataType {
+    name?: string
+    available?: string
+}
+
+export interface tableDataType {
+    id?: number;
+    index?: number;
+    name?: string;
+    order?: number;
+    data_scope?: number;
+    available?: boolean;
+    description?: string;
+    created_at?: string;
+    updated_at?: string;
+    creator?: creatorType;
+    menus?: permissionMenuType[];
+    depts?: permissionDeptType[];
+}
+
+export interface permissionDataType {
+    role_ids?: tableDataType['id'][];
+    menu_ids?: permissionMenuType['id'][];
+    data_scope?: number;
+    dept_ids?: number[];
+}
+
+
+export interface permissionDeptType {
+    id?: number;
+    name?: string;
+    parent_id?: number;
+    children?: permissionDeptType[];
+}
+
+export interface permissionMenuType {
+    id?: number;
+    name?: string;
+    type?: number;
+    permission?: string;
+    parent_id?: number;
+    available?: boolean;
+    description?: string;
+    children?: permissionMenuType[];
+}
+
+interface creatorType {
+    id?: number;
+    name?: string;
+    username?: string;
+}