From c5ff7daad73bc45fe834f51ddc0fe13b98c594de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E7=BA=A2=E4=B8=BD?= <1181930680@qq.com>
Date: Thu, 14 Nov 2024 16:14:13 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B2=97=E4=BD=8D=E3=80=81=E8=81=8C=E7=BA=A7?=
 =?UTF-8?q?=E3=80=81=E9=83=A8=E9=97=A8=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/icon/picker.vue            |   3 +-
 src/components/pagination/index.vue       |  42 ++++
 src/views/system/dept/columns.ts          |  68 +++++++
 src/views/system/dept/edit.vue            | 180 +++++++++++++++++
 src/views/system/dept/index.vue           | 164 +++++++++++++++
 src/views/system/level/columns.ts         |  51 +++++
 src/views/system/level/edit.vue           | 109 ++++++++++
 src/views/system/level/index.vue          | 217 ++++++++++++++++++++
 src/views/system/level/querySchemas.ts    |  30 +++
 src/views/system/level/userUpload.vue     | 132 ++++++++++++
 src/views/system/position/columns.ts      |  52 +++++
 src/views/system/position/edit.vue        | 109 ++++++++++
 src/views/system/position/index.vue       | 180 +++++++++++++++++
 src/views/system/position/querySchemas.ts |  30 +++
 src/views/system/role/columns.ts          |  52 +++--
 src/views/system/role/edit.vue            | 110 ++++++++++
 src/views/system/role/index.vue           | 179 +++++++++++++++++
 src/views/system/role/role.vue            | 233 ----------------------
 src/views/system/role/types/index.ts      |   8 -
 19 files changed, 1684 insertions(+), 265 deletions(-)
 create mode 100644 src/components/pagination/index.vue
 create mode 100644 src/views/system/dept/columns.ts
 create mode 100644 src/views/system/dept/edit.vue
 create mode 100644 src/views/system/dept/index.vue
 create mode 100644 src/views/system/level/columns.ts
 create mode 100644 src/views/system/level/edit.vue
 create mode 100644 src/views/system/level/index.vue
 create mode 100644 src/views/system/level/querySchemas.ts
 create mode 100644 src/views/system/level/userUpload.vue
 create mode 100644 src/views/system/position/columns.ts
 create mode 100644 src/views/system/position/edit.vue
 create mode 100644 src/views/system/position/index.vue
 create mode 100644 src/views/system/position/querySchemas.ts
 create mode 100644 src/views/system/role/edit.vue
 create mode 100644 src/views/system/role/index.vue
 delete mode 100644 src/views/system/role/role.vue
 delete mode 100644 src/views/system/role/types/index.ts

diff --git a/src/components/icon/picker.vue b/src/components/icon/picker.vue
index 3b6d7ab..372222e 100644
--- a/src/components/icon/picker.vue
+++ b/src/components/icon/picker.vue
@@ -1,5 +1,5 @@
 <template>
-  <n-popover :trigger="trigger" v-model:visible="visible">
+  <n-popover :trigger="trigger" v-model:show="visible">
     <template #trigger>
       <slot name="iconSelect"></slot>
     </template>
@@ -66,7 +66,6 @@ export default defineComponent({
     }
 
     watch(visible, () => {
-
       searchValue.value = ''
       iconArr.value = icons
     })
diff --git a/src/components/pagination/index.vue b/src/components/pagination/index.vue
new file mode 100644
index 0000000..7e9fa47
--- /dev/null
+++ b/src/components/pagination/index.vue
@@ -0,0 +1,42 @@
+<template>
+    <div class="pagination">
+        <n-pagination v-bind="props" v-model:page="pager.page" 
+            :prefix="(pagingInfo) =>`共${pagingInfo.itemCount} 条`"
+            :showQuickJumper="pager.jumper?true:false"
+            v-model:pageSize="pager.size" :item-count="pager.count" @pageSize="sizeChange"
+            @update:page="pageChange"></n-pagination>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from "vue";
+
+interface Props {
+    modelValue?: Record<string, any>,
+}
+const props = withDefaults(defineProps<Props>(), {
+    modelValue: () => ({}),
+})
+
+const emit = defineEmits<{
+    (event: 'change'): void
+    (event: 'update:modelValue', value: any): void
+}>()
+
+const pager = computed({
+    get() {
+        return props.modelValue
+    },
+    set(value) {
+        console.log(value)
+        emit('update:modelValue', value)
+    }
+})
+const sizeChange = () => {
+    pager.value.page = 1
+    emit('change')
+}
+const pageChange = (e) => {
+    emit('change')
+}
+</script>
diff --git a/src/views/system/dept/columns.ts b/src/views/system/dept/columns.ts
new file mode 100644
index 0000000..f503fa3
--- /dev/null
+++ b/src/views/system/dept/columns.ts
@@ -0,0 +1,68 @@
+import { h } from 'vue';
+import {NTag } from 'naive-ui';
+
+export const columns = [
+  {
+    title: '部门名称',
+    key: 'name',
+    width: 200,
+  },
+  {
+    title: '部门类型',
+    key: 'type',
+    width: 100,
+    render(record) {
+      let typeText = '';
+      let color = '';
+      switch (record.type) {
+        case 1:
+          typeText = '公司';
+          color = 'success';
+          break;
+        case 2:
+          typeText = '子公司';
+          color = 'primary';
+          break;
+        case 3:
+          typeText = '部门';
+          color = 'warning';
+          break;
+        case 4:
+          typeText = '小组';
+          color = '';
+          break;
+        default:
+          break;
+      }
+      return h(
+        NTag,
+        {
+          type: color,
+        },
+        {
+          default: () => typeText,
+        },
+      );
+    },
+  },
+  {
+    title: '部门排序',
+    key: 'sort',
+    width: 100,
+  },
+  {
+    title: '部门备注',
+    key: 'note',
+    width: 100,
+  },
+  {
+    title: '创建人',
+    key: 'createUser',
+    width: 100,
+  },
+  {
+    title: '创建时间',
+    key: 'createTime',
+    width: 180,
+  }
+];
diff --git a/src/views/system/dept/edit.vue b/src/views/system/dept/edit.vue
new file mode 100644
index 0000000..810b048
--- /dev/null
+++ b/src/views/system/dept/edit.vue
@@ -0,0 +1,180 @@
+<template>
+  <basicModal @register="modalRegister" ref="modalRef" class="basicModal basicFormModal" @on-ok="handleSubmit"
+    @on-close="handleClose">
+    <template #default>
+      <n-form ref="formRef" :model="formData" label-placement="left" label-width='80px'>
+        <n-form-item label="部门类型" path="type">
+          <n-select v-model:value="formData.type" class="flex-1" clearable :options="optionData.deptTypeList"
+            label-field="name" value-field="id" placeholder="请选择部门类型" />
+        </n-form-item>
+        <n-form-item label="父级部门" path="parentId"
+          :rule="{ type: 'number', required: true, message: '请选择父级部门', trigger: 'change' }">
+          <n-tree-select class="flex-1" v-model:value="formData.parentId" :options="deptOptions" clearable
+            default-expand-all label-field="name" key-field="id" placeholder="请选择父级菜单" />
+        </n-form-item>
+        <n-form-item label="部门名称" path="name" :rule="{ required: true, message: '请输入部门名称', trigger: 'blur' }">
+          <n-input v-model:value="formData.name" placeholder="请输入部门名称" clearable />
+        </n-form-item>
+        <n-form-item label="部门排序" path="sort" class="flex-1">
+          <div>
+            <n-input-number v-model:value="formData.sort" :max="9999" />
+            <div class="form-tips">数值越小越排前</div>
+          </div>
+        </n-form-item>
+        <n-form-item label="部门备注" path="note">
+          <n-input type="textarea" class="flex-1" v-model:value="formData.note" placeholder="请输入部门名称" clearable />
+        </n-form-item>
+      </n-form>
+    </template>
+  </basicModal>
+</template>
+<script lang="ts" setup>
+import type { FormInstance } from 'ant-design-vue';
+import { deptAdd, deptUpdate, getDeptList, getDeptDetail } from '@/api/system/dept';
+import { onMounted, reactive, ref, shallowRef } from 'vue';
+import { buildTree } from '@/utils/auth';
+import { useMessage, useDialog } from 'naive-ui';
+import { useModal } from '@/components/Modal';
+
+/**
+ * 定义接收的参数
+ */
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    required: true,
+    default: false,
+  },
+  deptId: {
+    type: Number,
+    required: true,
+    default: 0,
+  },
+  pid: {
+    type: Number,
+    default: 0,
+  },
+});
+
+/**
+ * 定义选项数据
+ */
+const optionData = reactive({
+  deptTypeList: [
+    {
+      id: 1,
+      name: '公司',
+    },
+    {
+      id: 2,
+      name: '子公司',
+    },
+    {
+      id: 3,
+      name: '部门',
+    },
+    {
+      id: 4,
+      name: '小组',
+    },
+  ],
+});
+
+/**
+ * 定义参数变量
+ */
+const message = useMessage();
+const expandedKeys = ref([]);
+const emit = defineEmits(['success', 'update:visible']);
+const formRef = shallowRef<FormInstance>();
+
+/**
+ * 定义表单参数
+ */
+const formData = reactive({
+  id: '',
+  //父级id
+  parentId: 0,
+  //类型
+  type: 1,
+  //名称
+  name: '',
+  //排序
+  sort: 0,
+  note: '',
+});
+const [modalRegister, { openModal, setSubLoading }] = useModal({
+  title: props.deptId ? '编辑部门' : "添加部门",
+  subBtuText: '确定',
+  width: 600,
+});
+/**
+ * 关闭窗体
+ */
+const handleClose = () => {
+  emit('update:visible', false);
+};
+
+const deptOptions = ref<any[]>([]);
+
+/**
+ * 获取部门数据
+ */
+const getDept = async () => {
+  const data: any = await getDeptList();
+  data.map((item) => {
+    expandedKeys.value.push(item.id);
+  });
+  const menu: any = [{ id: 0, name: '顶级', children: [] }];
+  const lists = buildTree(data);
+  menu[0].children.push(...lists);
+  deptOptions.value = menu;
+};
+
+/**
+ * 执行提交表单
+ */
+const handleSubmit = async () => {
+  formRef.value.validate().then(async () => {
+    props.deptId ? await deptUpdate(formData) : await deptAdd(formData);
+    message.success('操作成功');
+    setSubLoading(false)
+    emit('update:visible', false);
+    emit('success');
+  }).catch((error) => {
+    setSubLoading(false);
+  });
+};
+
+/**
+ * 设置表单数据
+ */
+const setFormData = (data: Record<any, any>) => {
+  for (const key in formData) {
+    if (data[key] != null && data[key] != undefined) {
+      formData[key] = data[key];
+    }
+  }
+};
+
+const getDetail = async () => {
+  const data = await getDeptDetail(props.deptId);
+  setFormData(data);
+};
+
+/**
+ * 钩子函数
+ */
+onMounted(() => {
+  getDept();
+  if (props.deptId) {
+    getDetail();
+  } else {
+    formData.parentId = props.pid;
+  }
+});
+//导出方法
+defineExpose({
+  openModal
+});
+</script>
diff --git a/src/views/system/dept/index.vue b/src/views/system/dept/index.vue
new file mode 100644
index 0000000..efe6cfc
--- /dev/null
+++ b/src/views/system/dept/index.vue
@@ -0,0 +1,164 @@
+<template>
+  <div class="menu-index">
+    <n-card :bordered="false" class="pt-3 mb-3 proCard">
+      <n-spin :show="loading">
+        <BasicTable ref="tableRef" :columns="columns" :paginate-single-page="false" :request="loadDataTable"
+          :row-key="(row) => row.id" :autoScrollX="true" :actionColumn="actionColumn"
+          v-model:expanded-row-keys="expandKeys">
+          <template #tableTitle>
+            <n-space>
+              <n-button type="primary" @click="handleAdd()" v-perm="['sys:dept:add']">
+                <template #icon>
+                  <n-icon>
+                    <PlusOutlined />
+                  </n-icon>
+                </template>
+                新增
+              </n-button>
+              <n-button @click="handleExpand"> 展开/折叠 </n-button>
+            </n-space>
+          </template>
+        </BasicTable>
+      </n-spin>
+    </n-card>
+    <editDialog ref="createModalRef" v-if="editVisible" :deptId="deptId" :pid="pid" v-model:visible="editVisible"
+      @success="loadDataTable" />
+  </div>
+</template>
+
+<script lang="ts" setup name="menus">
+import { defineAsyncComponent, nextTick, onMounted, ref, reactive, h } from 'vue';
+import { PlusOutlined, EditOutlined, DeleteOutlined, FormOutlined } from '@vicons/antd';
+import { BasicTable, TableAction } from '@/components/Table';
+import { renderIcon } from '@/utils';
+import editDialog from './edit.vue';
+import { getDeptList, deptDelete } from '@/api/system/dept';
+import { getTreeValues } from '@/utils/helper/treeHelper';
+import { useMessage, useDialog } from 'naive-ui';
+import { columns } from './columns';
+import { buildTree } from '@/utils/auth';
+
+/**
+ * 定义参数变量
+ */
+const message = useMessage();
+const dialog = useDialog()
+const tableRef = ref();
+const loading = ref(false);
+const editVisible = ref(false);
+const expandKeys = ref([]);
+const createModalRef = ref();
+const deptId = ref(0);
+const pid = ref(0);
+
+const actionColumn = reactive({
+  width: 220,
+  title: '操作',
+  align:'center',
+  key: 'action',
+  fixed: 'right',
+  render(record) {
+    return h(TableAction as any, {
+      style: 'button',
+      actions: [
+        {
+          label: '新增',
+          type: 'info',
+          icon: renderIcon(PlusOutlined),
+          auth: ['sys:dept:add'],
+          onclick: handleAdd.bind(null, record),
+        },
+        {
+          label: '编辑',
+          type: 'warning',
+          icon: renderIcon(FormOutlined),
+          auth: ['sys:dept:update'],
+          onclick: handleEdit.bind(null, record),
+        },
+        {
+          label: '删除',
+          type: 'error',
+          icon: renderIcon(DeleteOutlined),
+          auth: ['sys:dept:delete'],
+          onclick: handleDelete.bind(null, record),
+        },
+      ],
+    });
+  },
+});
+
+/**
+ * 获取部门列表
+ */
+const loadDataTable = async (res) => {
+  const data = await getDeptList();
+  data.map((item) => {
+    item.key = item.id;
+  });
+  const result = {
+    records: buildTree(data),
+    total: 1
+  }
+  return result
+};
+
+/**
+ * 执行添加
+ */
+const handleAdd = async (record: any) => {
+  deptId.value = 0;
+  pid.value = record ? record.parentId : 0;
+  editVisible.value = true;
+  await nextTick();
+  createModalRef.value.openModal();
+
+};
+
+/**
+ * 执行编辑
+ * @param data 参数
+ */
+const handleEdit = async (data: any) => {
+  deptId.value = data.id;
+  editVisible.value = true;
+  await nextTick();
+  createModalRef.value.openModal();
+};
+
+/**
+ * 执行删除
+ * @param id 菜单ID
+ */
+const handleDelete = (row: number) => {
+  dialog.warning({
+    title: '提示',
+    content: '确定要删除？',
+    positiveText: '确定',
+    negativeText: '取消',
+    onPositiveClick: async () => {
+      loading.value = true;
+      await deptDelete(row.id);
+      message.success('删除成功');
+      loadDataTable()
+      loading.value = false;
+    },
+  })
+};
+
+/**
+ * 执行扩展、收缩
+ */
+const handleExpand = () => {
+  loading.value = true;
+  if (!expandKeys.value.length) {
+    expandKeys.value = getTreeValues(tableRef.value.getDataSource(), 'id');
+    loading.value = false;
+
+  } else {
+    expandKeys.value = [];
+    loading.value = false;
+  }
+};
+</script>
+
+<style scoped></style>
diff --git a/src/views/system/level/columns.ts b/src/views/system/level/columns.ts
new file mode 100644
index 0000000..b3a098f
--- /dev/null
+++ b/src/views/system/level/columns.ts
@@ -0,0 +1,51 @@
+import { h } from 'vue';
+import { NTag } from 'naive-ui';
+
+export const columns = [
+  {
+    type: 'selection',
+    width: 50,
+    fixed:"left"
+  },
+  {
+    title: 'ID',
+    key:'id',
+    fixed: 'left',
+    width: 50,
+  },
+  {
+    title: '职级名称',
+    key:'name',
+    width: 100,
+  },
+  {
+    title: '职级状态',
+    width: 100,
+    render(record) {
+      return h(
+        NTag,
+        {
+          type: record.status == 1 ? 'success' : 'error',
+        },
+        {
+          default: () => (record.status == 1 ? '正常' : '停用'),
+        },
+      );
+    },
+  },
+  {
+    title: '排序',
+    key: 'sort',
+    width: 100,
+  },
+  {
+    title: '创建人',
+    key: 'createUser',
+    width: 100,
+  },
+  {
+    title: '创建时间',
+    key: 'createTime',
+    width: 180,
+  }
+];
diff --git a/src/views/system/level/edit.vue b/src/views/system/level/edit.vue
new file mode 100644
index 0000000..dc5e390
--- /dev/null
+++ b/src/views/system/level/edit.vue
@@ -0,0 +1,109 @@
+<template>
+  <basicModal @register="modalRegister" ref="modalRef" class="basicModal basicFormModal" @on-ok="handleSubmit"
+    @on-close="handleClose">
+    <template #default>
+      <n-form class="ls-form" ref="formRef" :model="formData" label-placement="left" label-width="85px">
+        <n-form-item label="职级名称" path="name" :rule="{ required: true, message: '请输入职级名称', trigger: 'blur' }">
+          <n-input v-model:value="formData.name" placeholder="请输入职级名称" clearable />
+        </n-form-item>
+        <n-form-item label="职级状态" path="code">
+          <n-radio-group v-model:value="formData.status" name="status">
+            <n-radio :value="1">正常</n-radio>
+            <n-radio :value="2">停用</n-radio>
+          </n-radio-group>
+        </n-form-item>
+        <n-form-item label="排序" path="sort">
+          <n-input-number v-model:value="formData.sort" />
+        </n-form-item>
+      </n-form>
+    </template>
+  </basicModal>
+</template>
+<script lang="ts" setup>
+import { getLevelDetail, levelAdd, levelUpdate } from '@/api/system/level';
+import { onMounted, reactive, ref } from 'vue';
+import { useMessage } from 'naive-ui';
+import { useModal } from '@/components/Modal';
+
+const emit = defineEmits(['success', 'update:visible']);
+const formRef = ref();
+
+/**
+ * 定义表单参数
+ */
+const message = useMessage();
+const formData = reactive({
+  id: '',
+  name: '',
+  status: 1,
+  sort: 0,
+});
+
+/**
+ * 定义接收的参数
+ */
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    required: true,
+    default: false,
+  },
+  levelId: {
+    type: Number,
+    required: true,
+    default: 0,
+  },
+});
+const [modalRegister, { openModal, setSubLoading }] = useModal({
+  title: props.levelId ? '编辑职级' : "添加职级",
+  subBtuText: '确定',
+  width: 600,
+});
+/**
+ * 执行提交
+ */
+const handleSubmit = async () => {
+
+  formRef.value.validate().then(async () => {
+    props.levelId ? await levelUpdate(formData) : await levelAdd(formData);
+    message.success('操作成功');
+    emit('update:visible', false);
+    emit('success');
+  }).catch((error) => {
+    setSubLoading(false);
+  });
+};
+
+/**
+ * 关闭窗体
+ */
+const handleClose = () => {
+  emit('update:visible', false);
+};
+
+/**
+ * 设置表单数据
+ */
+const setFormData = async () => {
+  const data = await getLevelDetail(props.levelId);
+  for (const key in formData) {
+    if (data[key] != null && data[key] != undefined) {
+      //@ts-ignore
+      formData[key] = data[key];
+    }
+  }
+};
+
+/**
+ * 钩子函数
+ */
+onMounted(() => {
+  if (props.levelId) {
+    setFormData();
+  }
+});
+//导出方法
+defineExpose({
+  openModal,
+});
+</script>
diff --git a/src/views/system/level/index.vue b/src/views/system/level/index.vue
new file mode 100644
index 0000000..6d70935
--- /dev/null
+++ b/src/views/system/level/index.vue
@@ -0,0 +1,217 @@
+<template>
+  <div>
+    <n-card :bordered="false" class="pt-3 mb-3 proCard">
+      <BasicForm @register="register" @submit="handleSubmit" @reset="handleReset">
+        <template #statusSlot="{ model, field }">
+          <n-input v-model:value="model[field]" />
+        </template>
+      </BasicForm>
+    </n-card>
+    <n-card :bordered="false" class="proCard">
+      <BasicTable :columns="columns" :request="loadDataTable" :row-key="(row) => row.id" ref="basicTableRef"
+        :actionColumn="actionColumn" @update:checked-row-keys="onCheckedRow" :autoScrollX="true">
+        <template #tableTitle>
+          <n-space>
+            <n-button type="primary" @click="handleAdd" v-perm="['sys:level:add']">
+              <template #icon>
+                <n-icon>
+                  <PlusOutlined />
+                </n-icon>
+              </template>
+              新建
+            </n-button>
+
+            <n-button type="error" @click="handleDelete" :disabled="!rowKeys.length" v-perm="['sys:level:batchDelete']">
+              <template #icon>
+                <n-icon>
+                  <DeleteOutlined />
+                </n-icon>
+              </template>
+              删除
+            </n-button>
+            <n-button @click="importVisible = true" v-perm="['sys:level:import']">
+              <template #icon>
+                <n-icon>
+                  <ToTopOutlined />
+                </n-icon>
+              </template>
+              导入
+            </n-button>
+            <n-button @click="handleExport" :loading="exportLoading" :disabled="exportLoading"
+              v-perm="['sys:level:export']">
+              <template #icon>
+                <n-icon>
+                  <DownloadOutlined />
+                </n-icon>
+              </template>
+              导出
+            </n-button>
+          </n-space>
+        </template>
+      </BasicTable>
+    </n-card>
+    <editDialog ref="createModalRef" :levelId="levelId" v-if="editVisible" v-model:visible="editVisible"
+      @success="reloadTable('noRefresh')" />
+
+    <userUpload v-if="importVisible" v-model:visible="importVisible" @success="reloadTable()" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { h, nextTick, reactive, ref, unref } from 'vue';
+import { useMessage, useDialog } from 'naive-ui';
+import { TableAction } from '@/components/Table';
+import { BasicForm, useForm } from '@/components/Form/index';
+import { getLevelList, levelDelete, levelBatchDelete, levelExport } from '@/api/system/level';
+import { columns } from './columns';
+import {
+  PlusOutlined,
+  DeleteOutlined,
+  DownloadOutlined,
+  ToTopOutlined,
+  FormOutlined
+} from '@vicons/antd';
+import CreateModal from './CreateModal.vue';
+import editDialog from './edit.vue';
+import userUpload from './userUpload.vue';
+import { basicModal, useModal } from '@/components/Modal';
+import { schemas } from './querySchemas';
+import { renderIcon } from '@/utils';
+
+const message = useMessage();
+const dialog = useDialog()
+const basicTableRef = ref();
+const createModalRef = ref();
+const editVisible = ref(false);
+const levelId = ref(0);
+const rowKeys = ref([]);
+const importVisible = ref(false)
+const exportLoading = ref(false);
+
+const showModal = ref(false);
+const formParams = reactive({
+  name: '',
+  status: '',
+});
+
+const actionColumn = reactive({
+  width: 400,
+  title: '操作',
+  align: 'center',
+  key: 'action',
+  fixed: 'right',
+  render(record) {
+    return h(TableAction as any, {
+      style: 'button',
+      actions: [
+        {
+          label: '编辑',
+          icon: renderIcon(FormOutlined),
+          type: 'info',
+          onClick: handleEdit.bind(null, record),
+          auth: ['sys:level:update'],
+        },
+        {
+          label: '删除',
+          icon: renderIcon(DeleteOutlined),
+          type: 'error',
+          onClick: handleDelete.bind(null, record),
+          auth: ['sys:level:delete'],
+        },
+      ],
+    });
+  },
+});
+
+function addTable() {
+  showModal.value = true;
+}
+
+const loadDataTable = async (res) => {
+  const result = await getLevelList({ ...formParams, ...res });
+  return result;
+};
+
+function onCheckedRow(keys) {
+  rowKeys.value = keys;
+}
+
+function reloadTable(noRefresh = '') {
+  basicTableRef.value.reload(noRefresh ? {} : { pageNo: 1 });
+}
+
+function handleSubmit(values: Recordable) {
+  for (const key in formParams) {
+    formParams[key] = '';
+  }
+  for (const key in values) {
+    formParams[key] = values[key];
+  }
+  reloadTable();
+}
+
+function handleReset(values: Recordable) {
+  for (const key in formParams) {
+    formParams[key] = '';
+  }
+  for (const key in values) {
+    formParams[key] = values[key];
+  }
+  reloadTable();
+}
+
+const [register, { }] = useForm({
+  gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
+  labelWidth: 80,
+  schemas,
+});
+
+/**
+* 执行添加
+*/
+const handleAdd = async () => {
+  levelId.value = 0;
+  editVisible.value = true;
+  await nextTick();
+  createModalRef.value.openModal();
+};
+/**
+* 执行编辑
+*/
+async function handleEdit(record: Recordable) {
+  levelId.value = record.id;
+  editVisible.value = true;
+  await nextTick();
+  createModalRef.value.openModal();
+}
+/**
+ * 执行删除
+ * @param id 参数
+ */
+async function handleDelete(record) {
+  dialog.warning({
+    title: '提示',
+    content: '确定要删除？',
+    positiveText: '确定',
+    negativeText: '取消',
+    onPositiveClick: async () => {
+      record.id ? await levelDelete(record.id) : await levelBatchDelete(rowKeys.value);
+      message.success('删除成功');
+      reloadTable();
+    },
+  })
+}
+/**
+ * 执行导出
+ */
+const handleExport = async () => {
+  exportLoading.value = true;
+  const data = await levelExport();
+  window.open(data);
+  exportLoading.value = false;
+  message.success('导出成功');
+};
+
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/system/level/querySchemas.ts b/src/views/system/level/querySchemas.ts
new file mode 100644
index 0000000..9c2cef0
--- /dev/null
+++ b/src/views/system/level/querySchemas.ts
@@ -0,0 +1,30 @@
+import { FormSchema } from '@/components/Form/index';
+export const schemas: FormSchema[] = [
+  {
+    field: 'name',
+    component: 'NInput',
+    label: '租户名称',
+    componentProps: {
+      placeholder: '请输入租户名称',
+    },
+  },
+  {
+    field: 'status',
+    component: 'NSelect',
+    label: '状态',
+    componentProps: {
+      placeholder: '请选择状态',
+      clearable: true,
+      options: [
+        {
+          label: '正常',
+          value: '0',
+        },
+        {
+          label: '禁用',
+          value: '1',
+        },
+      ],
+    },
+  },
+];
diff --git a/src/views/system/level/userUpload.vue b/src/views/system/level/userUpload.vue
new file mode 100644
index 0000000..56ca856
--- /dev/null
+++ b/src/views/system/level/userUpload.vue
@@ -0,0 +1,132 @@
+<template>
+  <n-modal
+    v-model:show="props.visible"
+    preset="dialog"
+    style="width:450px;"
+    @close="dialogClose"
+    positive-text="确定"
+    negative-text="取消"
+     @positive-click="dialogSubmit"
+    @negative-click="dialogClose"
+  >
+  <template #header>
+      {{ dialogTitle }}
+  </template>
+    <n-upload
+      action="/api/level/import"
+      :headers="uploadHeaders"
+      name="file"
+      ref="uploadRef"
+      :default-upload="false"
+      @change="handleChange"
+      @before-upload="beforeUpload"
+      v-model:file-list="fileList"
+      :max="1"
+      v-perm="['sys:level:import']"
+    >
+    <n-upload-dragger>
+      <n-icon size="60" color="#165df">
+        <CloudUploadOutlined/>
+      </n-icon>
+      <div> 点击或将文件拖拽到这里上传</div>
+    </n-upload-dragger>
+    </n-upload>
+    <div style="margin-top: 20px">
+      <span>只能上传 xls、xlsx 文件</span>
+      <!-- <n-button quaternary type="info" @click="handleDownload">下载模板</n-button> -->
+    </div>
+  </n-modal>
+</template>
+
+<script lang="ts" setup>
+  import { getTemplateByCode } from '@/api/system/user';
+  import { computed, reactive, ref } from 'vue';
+  import { CloudUploadOutlined } from '@vicons/antd';
+  import { useMessage } from 'naive-ui';
+  import { useUserStore } from '@/store/modules/user';
+  import type { UploadChangeParam } from 'ant-design-vue';
+
+  /**
+   * 定义接收的参数
+   */
+  const props = defineProps({
+    visible: {
+      type: Boolean,
+      required: true,
+      default: false,
+    }
+  });
+
+  /**
+   * 定义参数变量
+   */
+  const uploadHeaders = reactive({
+    authorization: useUserStore().getToken,
+  });
+  const message = useMessage();
+  const uploadRef = ref();
+  const fileList = ref([]);
+  const emit = defineEmits(['success', 'update:visible']);
+
+  /**
+   * 定义弹窗标题
+   */
+  const dialogTitle = computed(() => {
+    return '导入职级';
+  });
+
+  /**
+   * 关闭窗体
+   */
+  const dialogClose = () => {
+    emit('update:visible', false);
+  };
+
+  /**
+   * 上传文件之前验证
+   */
+  const beforeUpload = (file) => {
+    const isLt2M = file.size / 1024 / 1024 < 200;
+    if (!isLt2M) {
+      message.warning('大小不能超过200MB!');
+      return false;
+    }
+    if (!/\.(xlsx|xls|XLSX|XLS)$/.test(file.name)) {
+      message.warning('请上传.xlsx .xls');
+      return false;
+    }
+    return true;
+  };
+
+  /**
+   * 执行上传文件
+   * @param param0 参数
+   */
+  const handleChange = ({ file }: UploadChangeParam) => {
+    const status = file.status;
+    if (status === 'done') {
+      let data = file.response;
+      if (data.code != 0) {
+        message.error(data.msg || '导入失败');
+      } else {
+        message.success('导入成功');
+        emit('update:visible', false);
+        emit('success');
+      }
+    } else if (status === 'error') {
+      message.error('导入失败');
+    }
+  };
+
+  /**
+   * 执行下载文件
+   */
+  const handleDownload = async () => {
+    const res = await getTemplateByCode('user_import');
+    window.open(res.filePath);
+  };
+
+  const dialogSubmit = async()=>{
+    uploadRef.value?.submit()
+  }
+</script>
diff --git a/src/views/system/position/columns.ts b/src/views/system/position/columns.ts
new file mode 100644
index 0000000..009719a
--- /dev/null
+++ b/src/views/system/position/columns.ts
@@ -0,0 +1,52 @@
+import { h } from 'vue';
+import { NTag } from 'naive-ui';
+
+export const columns = [
+  {
+    type: 'selection',
+    width: 50,
+    fixed:"left"
+  },
+  {
+    title: 'ID',
+    key: 'id',
+    fixed: 'left',
+    width: 50,
+  },
+  {
+    title: '岗位名称',
+    key: 'name',
+    width: 100,
+  },
+  {
+    title: '岗位状态',
+    key: 'status',
+    width: 100,
+    render(record) {
+      return h(
+        NTag,
+        {
+          type: record.status == 1 ? 'success' : 'error',
+        },
+        {
+          default: () => (record.status == 1 ? '正常' : '停用'),
+        },
+      );
+    },
+  },
+  {
+    title: '排序',
+    key: 'sort',
+    width: 100,
+  },
+  {
+    title: '创建人',
+    key: 'createUser',
+    width: 100,
+  },
+  {
+    title: '创建时间',
+    key: 'createTime',
+    width: 180,
+  }
+];
diff --git a/src/views/system/position/edit.vue b/src/views/system/position/edit.vue
new file mode 100644
index 0000000..5c29498
--- /dev/null
+++ b/src/views/system/position/edit.vue
@@ -0,0 +1,109 @@
+<template>
+  <basicModal @register="modalRegister" ref="modalRef" class="basicModal basicFormModal" @on-ok="handleSubmit"
+    @on-close="handleClose">
+    <template #default>
+      <n-form class="ls-form" ref="formRef" :model="formData" label-placement="left" label-width="85px">
+        <n-form-item label="职级名称" path="name" :rule="{ required: true, message: '请输入职级名称', trigger: 'blur' }">
+          <n-input v-model:value="formData.name" placeholder="请输入职级名称" clearable />
+        </n-form-item>
+        <n-form-item label="职级状态" path="code">
+          <n-radio-group v-model:value="formData.status" name="status">
+            <n-radio :value="1">正常</n-radio>
+            <n-radio :value="2">停用</n-radio>
+          </n-radio-group>
+        </n-form-item>
+        <n-form-item label="排序" path="sort">
+          <n-input-number v-model:value="formData.sort" />
+        </n-form-item>
+      </n-form>
+    </template>
+  </basicModal>
+</template>
+<script lang="ts" setup>
+  import { getPositionDetail, positionAdd, positionUpdate } from '@/api/system/position';
+import { onMounted, reactive, ref } from 'vue';
+import { useMessage } from 'naive-ui';
+import { useModal } from '@/components/Modal';
+
+const emit = defineEmits(['success', 'update:visible']);
+const formRef = ref();
+
+/**
+ * 定义表单参数
+ */
+const message = useMessage();
+const formData = reactive({
+  id: '',
+  name: '',
+  status: 1,
+  sort: 0,
+});
+
+/**
+ * 定义接收的参数
+ */
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    required: true,
+    default: false,
+  },
+  positionId: {
+    type: Number,
+    required: true,
+    default: 0,
+  },
+});
+const [modalRegister, { openModal, setSubLoading }] = useModal({
+  title: props.positionId ? '编辑岗位' : "添加岗位",
+  subBtuText: '确定',
+  width: 600,
+});
+/**
+ * 执行提交
+ */
+const handleSubmit = async () => {
+
+  formRef.value.validate().then(async () => {
+    props.positionId ? await positionUpdate(formData) : await positionAdd(formData);
+    message.success('操作成功');
+    emit('update:visible', false);
+    emit('success');
+  }).catch((error) => {
+    setSubLoading(false);
+  });
+};
+
+/**
+ * 关闭窗体
+ */
+const handleClose = () => {
+  emit('update:visible', false);
+};
+
+/**
+ * 设置表单数据
+ */
+const setFormData = async () => {
+  const data = await getPositionDetail(props.positionId);
+  for (const key in formData) {
+    if (data[key] != null && data[key] != undefined) {
+      //@ts-ignore
+      formData[key] = data[key];
+    }
+  }
+};
+
+/**
+ * 钩子函数
+ */
+onMounted(() => {
+  if (props.positionId) {
+    setFormData();
+  }
+});
+//导出方法
+defineExpose({
+  openModal,
+});
+</script>
diff --git a/src/views/system/position/index.vue b/src/views/system/position/index.vue
new file mode 100644
index 0000000..cd24c7c
--- /dev/null
+++ b/src/views/system/position/index.vue
@@ -0,0 +1,180 @@
+<template>
+  <div>
+    <n-card :bordered="false" class="pt-3 mb-3 proCard">
+      <BasicForm @register="register" @submit="handleSubmit" @reset="handleReset">
+        <template #statusSlot="{ model, field }">
+          <n-input v-model:value="model[field]" />
+        </template>
+      </BasicForm>
+    </n-card>
+    <n-card :bordered="false" class="proCard">
+      <BasicTable :columns="columns" :request="loadDataTable" :row-key="(row) => row.id" ref="basicTableRef"
+        :actionColumn="actionColumn" @update:checked-row-keys="onCheckedRow" :autoScrollX="true">
+        <template #tableTitle>
+          <n-space>
+            <n-button type="primary" @click="handleAdd" v-perm="['sys:position:add']">
+              <template #icon>
+                <n-icon>
+                  <PlusOutlined />
+                </n-icon>
+              </template>
+              新建
+            </n-button>
+
+            <n-button type="error" @click="handleDelete" :disabled="!rowKeys.length" v-perm="['sys:position:batchDelete']">
+              <template #icon>
+                <n-icon>
+                  <DeleteOutlined />
+                </n-icon>
+              </template>
+              删除
+            </n-button>
+          </n-space>
+        </template>
+      </BasicTable>
+    </n-card>
+    <editDialog ref="createModalRef" :positionId="positionId" v-if="editVisible" v-model:visible="editVisible"
+      @success="reloadTable('noRefresh')" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { h, nextTick, reactive, ref, unref } from 'vue';
+import { useMessage, useDialog } from 'naive-ui';
+import { TableAction } from '@/components/Table';
+import { BasicForm, useForm } from '@/components/Form/index';
+import { getPositionList, positionDelete, positionBatchDelete } from '@/api/system/position';
+import { columns } from './columns';
+import {PlusOutlined,DeleteOutlined,FormOutlined} from '@vicons/antd';
+import CreateModal from './CreateModal.vue';
+import editDialog from './edit.vue';
+import { basicModal, useModal } from '@/components/Modal';
+import { schemas } from './querySchemas';
+import { renderIcon } from '@/utils';
+
+const message = useMessage();
+const dialog = useDialog()
+const basicTableRef = ref();
+const createModalRef = ref();
+const editVisible = ref(false);
+const positionId = ref(0);
+const rowKeys = ref([]);
+const exportLoading = ref(false);
+
+const showModal = ref(false);
+const formParams = reactive({
+  name: '',
+  status: '',
+});
+
+const actionColumn = reactive({
+  width: 400,
+  title: '操作',
+  align:'center',
+  key: 'action',
+  fixed: 'right',
+  render(record) {
+    return h(TableAction as any, {
+      style: 'button',
+      actions: [
+        {
+          label: '编辑',
+          icon: renderIcon(FormOutlined),
+          type: 'info',
+          onClick: handleEdit.bind(null, record),
+          auth: ['sys:position:update'],
+        },
+        {
+          label: '删除',
+          icon: renderIcon(DeleteOutlined),
+          type: 'error',
+          onClick: handleDelete.bind(null, record),
+          auth: ['sys:position:delete'],
+        },
+      ],
+    });
+  },
+});
+
+function addTable() {
+  showModal.value = true;
+}
+
+const loadDataTable = async (res) => {
+  const result = await getPositionList({ ...formParams, ...res });
+  return result;
+};
+
+function onCheckedRow(keys) {
+  rowKeys.value = keys;
+}
+
+function reloadTable(noRefresh = '') {
+  basicTableRef.value.reload(noRefresh ? {} : { pageNo: 1 });
+}
+
+function handleSubmit(values: Recordable) {
+  for (const key in formParams) {
+    formParams[key] = '';
+  }
+  for (const key in values) {
+    formParams[key] = values[key];
+  }
+  reloadTable();
+}
+
+function handleReset(values: Recordable) {
+  for (const key in formParams) {
+    formParams[key] = '';
+  }
+  for (const key in values) {
+    formParams[key] = values[key];
+  }
+  reloadTable();
+}
+
+const [register, { }] = useForm({
+  gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
+  labelWidth: 80,
+  schemas,
+});
+
+/**
+* 执行添加
+*/
+const handleAdd = async () => {
+  positionId.value = 0;
+  editVisible.value = true;
+  await nextTick();
+  createModalRef.value.openModal();
+};
+/**
+* 执行编辑
+*/
+async function handleEdit(record: Recordable) {
+  positionId.value = record.id;
+  editVisible.value = true;
+  await nextTick();
+  createModalRef.value.openModal();
+}
+/**
+ * 执行删除
+ * @param id 参数
+ */
+async function handleDelete(record) {
+  dialog.warning({
+    title: '提示',
+    content: '确定要删除？',
+    positiveText: '确定',
+    negativeText: '取消',
+    onPositiveClick: async () => {
+      record.id ? await positionDelete(record.id) : await positionBatchDelete(rowKeys.value);
+      message.success('删除成功');
+      reloadTable();
+    },
+  })
+}
+
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/system/position/querySchemas.ts b/src/views/system/position/querySchemas.ts
new file mode 100644
index 0000000..a78b9a2
--- /dev/null
+++ b/src/views/system/position/querySchemas.ts
@@ -0,0 +1,30 @@
+import { FormSchema } from '@/components/Form/index';
+export const schemas: FormSchema[] = [
+  {
+    field: 'name',
+    component: 'NInput',
+    label: '岗位名称',
+    componentProps: {
+      placeholder: '请输入岗位名称',
+    },
+  },
+  {
+    field: 'status',
+    component: 'NSelect',
+    label: '状态',
+    componentProps: {
+      placeholder: '请选择状态',
+      clearable: true,
+      options: [
+        {
+          label: '正常',
+          value: '1',
+        },
+        {
+          label: '停用',
+          value: '2',
+        },
+      ],
+    },
+  },
+];
diff --git a/src/views/system/role/columns.ts b/src/views/system/role/columns.ts
index 3f08e4a..3fb5c37 100644
--- a/src/views/system/role/columns.ts
+++ b/src/views/system/role/columns.ts
@@ -1,37 +1,45 @@
 import { h } from 'vue';
-import { NTag } from 'naive-ui';
-import { BasicColumn } from '@/components/Table';
 
-export const columns: BasicColumn[] = [
+export const columns = [
   {
-    title: 'id',
+    type: 'selection',
+    width: 50,
+    fixed:"left"
+  },
+  {
+    title: 'ID',
     key: 'id',
+    fixed: 'left',
+    width: 50,
   },
   {
     title: '角色名称',
     key: 'name',
+    width: 150,
   },
   {
-    title: '说明',
-    key: 'explain',
+    title: '角色编码',
+    key: 'code',
+    width: 250,
   },
   {
-    title: '是否默认角色',
-    key: 'isDefault',
-    render(row) {
-      return h(
-        NTag,
-        {
-          type: row.isDefault ? 'success' : 'error',
-        },
-        {
-          default: () => (row.isDefault ? '是' : '否'),
-        },
-      );
-    },
+    title: '排序',
+    key: 'sort',
+    width: 100,
+  },
+  {
+    title: '备注',
+    key: 'note',
+    width: 200,
+  },
+  {
+    title: '创建人',
+    key: 'createUser',
+    width: 100,
   },
   {
     title: '创建时间',
-    key: 'create_date',
-  },
-];
+    key: 'createTime',
+    width: 180,
+  }
+];
\ No newline at end of file
diff --git a/src/views/system/role/edit.vue b/src/views/system/role/edit.vue
new file mode 100644
index 0000000..624bea4
--- /dev/null
+++ b/src/views/system/role/edit.vue
@@ -0,0 +1,110 @@
+<template>
+  <basicModal @register="modalRegister" ref="modalRef" class="basicModal basicFormModal" @on-ok="handleSubmit"
+    @on-close="handleClose">
+    <template #default>
+      <n-form class="ls-form" ref="formRef" :model="formData" label-placement="left" label-width="85px">
+        <n-form-item label="角色名称" path="name" :rule="{ required: true, message: '请输入角色名称', trigger: 'blur' }">
+          <n-input v-model:value="formData.name" placeholder="请输入角色名称" clearable />
+        </n-form-item>
+        <n-form-item label="角色编码" path="code" :rule="{ required: true, message: '请输入角色编码', trigger: 'blur' }">
+          <n-input v-model:value="formData.code" placeholder="请输入角色编码" clearable />
+        </n-form-item>
+        <n-form-item label="排序" path="sort">
+          <n-input-number v-model:value="formData.sort" />
+        </n-form-item>
+        <n-form-item label="备注" path="note">
+          <n-input v-model:value="formData.note" type="textarea" placeholder="请输入备注" clearable />
+        </n-form-item>
+      </n-form>
+    </template>
+  </basicModal>
+</template>
+<script lang="ts" setup>
+import { getRoleDetail, roleAdd, roleUpdate } from '@/api/system/role';
+import { onMounted, reactive, ref } from 'vue';
+import { useMessage } from 'naive-ui';
+import { useModal } from '@/components/Modal';
+
+const emit = defineEmits(['success', 'update:visible']);
+const formRef = ref();
+
+/**
+ * 定义表单参数
+ */
+const message = useMessage();
+const formData = reactive({
+  id: '',
+    name: '',
+    code: '',
+    sort: 0,
+    note: '',
+});
+
+/**
+ * 定义接收的参数
+ */
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    required: true,
+    default: false,
+  },
+  roleId: {
+    type: Number,
+    required: true,
+    default: 0,
+  },
+});
+const [modalRegister, { openModal, setSubLoading }] = useModal({
+  title: props.roleId ? '编辑角色' : "添加角色",
+  subBtuText: '确定',
+  width: 600,
+});
+/**
+ * 执行提交
+ */
+const handleSubmit = async () => {
+
+  formRef.value.validate().then(async () => {
+    props.roleId ? await roleUpdate(formData) : await roleAdd(formData);
+    message.success('操作成功');
+    emit('update:visible', false);
+    emit('success');
+  }).catch((error) => {
+    setSubLoading(false);
+  });
+};
+
+/**
+ * 关闭窗体
+ */
+const handleClose = () => {
+  emit('update:visible', false);
+};
+
+/**
+ * 设置表单数据
+ */
+const setFormData = async () => {
+  const data = await getRoleDetail(props.roleId);
+  for (const key in formData) {
+    if (data[key] != null && data[key] != undefined) {
+      //@ts-ignore
+      formData[key] = data[key];
+    }
+  }
+};
+
+/**
+ * 钩子函数
+ */
+onMounted(() => {
+  if (props.roleId) {
+    setFormData();
+  }
+});
+//导出方法
+defineExpose({
+  openModal,
+});
+</script>
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
new file mode 100644
index 0000000..a6a3bc1
--- /dev/null
+++ b/src/views/system/role/index.vue
@@ -0,0 +1,179 @@
+<template>
+  <div>
+    <n-card :bordered="false" class="pt-3 mb-3 proCard">
+      <BasicForm @register="register" @submit="handleSubmit" @reset="handleReset">
+        <template #statusSlot="{ model, field }">
+          <n-input v-model:value="model[field]" />
+        </template>
+      </BasicForm>
+    </n-card>
+    <n-card :bordered="false" class="proCard">
+      <BasicTable :columns="columns" :request="loadDataTable" :row-key="(row) => row.id" ref="basicTableRef"
+        :actionColumn="actionColumn" @update:checked-row-keys="onCheckedRow" :autoScrollX="true">
+        <template #tableTitle>
+          <n-space>
+            <n-button type="primary" @click="handleAdd" v-perm="['sys:role:add']">
+              <template #icon>
+                <n-icon>
+                  <PlusOutlined />
+                </n-icon>
+              </template>
+              新建
+            </n-button>
+
+            <n-button type="error" @click="handleDelete" :disabled="!rowKeys.length" v-perm="['sys:role:batchDelete']">
+              <template #icon>
+                <n-icon>
+                  <DeleteOutlined />
+                </n-icon>
+              </template>
+              删除
+            </n-button>
+          </n-space>
+        </template>
+      </BasicTable>
+    </n-card>
+    <editDialog ref="createModalRef" :roleId="roleId" v-if="editVisible" v-model:visible="editVisible"
+      @success="reloadTable('noRefresh')" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { h, nextTick, reactive, ref, unref } from 'vue';
+import { useMessage, useDialog } from 'naive-ui';
+import { TableAction } from '@/components/Table';
+import { BasicForm, useForm } from '@/components/Form/index';
+import { getRoleList, roleDelete, roleBatchDelete } from '@/api/system/role';
+import { columns } from './columns';
+import {PlusOutlined,DeleteOutlined,FormOutlined} from '@vicons/antd';
+import CreateModal from './CreateModal.vue';
+import editDialog from './edit.vue';
+import { basicModal, useModal } from '@/components/Modal';
+import { schemas } from './querySchemas';
+import { renderIcon } from '@/utils';
+
+const message = useMessage();
+const dialog = useDialog()
+const basicTableRef = ref();
+const createModalRef = ref();
+const editVisible = ref(false);
+const roleId = ref(0);
+const rowKeys = ref([]);
+const exportLoading = ref(false);
+
+const showModal = ref(false);
+const formParams = reactive({
+  name: ''
+});
+
+const actionColumn = reactive({
+  width: 200,
+  title: '操作',
+  align:'center',
+  key: 'action',
+  fixed: 'right',
+  render(record) {
+    return h(TableAction as any, {
+      style: 'button',
+      actions: [
+        {
+          label: '编辑',
+          icon: renderIcon(FormOutlined),
+          type: 'info',
+          onClick: handleEdit.bind(null, record),
+          auth: ['sys:role:update'],
+        },
+        {
+          label: '删除',
+          icon: renderIcon(DeleteOutlined),
+          type: 'error',
+          onClick: handleDelete.bind(null, record),
+          auth: ['sys:role:delete'],
+        },
+      ],
+    });
+  },
+});
+
+function addTable() {
+  showModal.value = true;
+}
+
+const loadDataTable = async (res) => {
+  const result = await getRoleList({ ...formParams, ...res });
+  return result;
+};
+
+function onCheckedRow(keys) {
+  rowKeys.value = keys;
+}
+
+function reloadTable(noRefresh = '') {
+  basicTableRef.value.reload(noRefresh ? {} : { pageNo: 1 });
+}
+
+function handleSubmit(values: Recordable) {
+  for (const key in formParams) {
+    formParams[key] = '';
+  }
+  for (const key in values) {
+    formParams[key] = values[key];
+  }
+  reloadTable();
+}
+
+function handleReset(values: Recordable) {
+  for (const key in formParams) {
+    formParams[key] = '';
+  }
+  for (const key in values) {
+    formParams[key] = values[key];
+  }
+  reloadTable();
+}
+
+const [register, { }] = useForm({
+  gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
+  labelWidth: 80,
+  schemas,
+});
+
+/**
+* 执行添加
+*/
+const handleAdd = async () => {
+  roleId.value = 0;
+  editVisible.value = true;
+  await nextTick();
+  createModalRef.value.openModal();
+};
+/**
+* 执行编辑
+*/
+async function handleEdit(record: Recordable) {
+  roleId.value = record.id;
+  editVisible.value = true;
+  await nextTick();
+  createModalRef.value.openModal();
+}
+/**
+ * 执行删除
+ * @param id 参数
+ */
+async function handleDelete(record) {
+  dialog.warning({
+    title: '提示',
+    content: '确定要删除？',
+    positiveText: '确定',
+    negativeText: '取消',
+    onPositiveClick: async () => {
+      record.id ? await roleDelete(record.id) : await roleBatchDelete(rowKeys.value);
+      message.success('删除成功');
+      reloadTable();
+    },
+  })
+}
+
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/system/role/role.vue b/src/views/system/role/role.vue
deleted file mode 100644
index 27ccd47..0000000
--- a/src/views/system/role/role.vue
+++ /dev/null
@@ -1,233 +0,0 @@
-<template>
-  <div>
-    <div class="n-layout-page-header">
-      <n-card :bordered="false" title="角色权限管理">
-        页面数据为 Mock 示例数据，非真实数据。
-      </n-card>
-    </div>
-    <n-card :bordered="false" class="mt-3 proCard">
-      <BasicTable
-        :columns="columns"
-        :request="loadDataTable"
-        :row-key="(row) => row.id"
-        ref="actionRef"
-        :actionColumn="actionColumn"
-        @update:checked-row-keys="onCheckedRow"
-      >
-        <template #tableTitle>
-          <n-button type="primary" @click="openCreateDrawer">
-            <template #icon>
-              <n-icon>
-                <PlusOutlined />
-              </n-icon>
-            </template>
-            添加角色
-          </n-button>
-        </template>
-
-        <template #action>
-          <TableAction />
-        </template>
-      </BasicTable>
-    </n-card>
-
-    <n-modal v-model:show="showModal" :show-icon="false" preset="dialog" :title="editRoleTitle">
-      <div class="py-3 menu-list">
-        <n-tree
-          block-line
-          cascade
-          checkable
-          :virtual-scroll="true"
-          :data="treeData"
-          :expandedKeys="expandedKeys"
-          :checked-keys="checkedKeys"
-          style="max-height: 950px; overflow: hidden"
-          @update:checked-keys="checkedTree"
-          @update:expanded-keys="onExpandedKeys"
-        />
-      </div>
-      <template #action>
-        <n-space>
-          <n-button type="info" ghost icon-placement="left" @click="packHandle">
-            全部{{ expandedKeys.length ? '收起' : '展开' }}
-          </n-button>
-
-          <n-button type="info" ghost icon-placement="left" @click="checkedAllHandle">
-            全部{{ checkedAll ? '取消' : '选择' }}
-          </n-button>
-          <n-button type="primary" :loading="formBtnLoading" @click="confirmForm">提交</n-button>
-        </n-space>
-      </template>
-    </n-modal>
-
-    <CreateDrawer
-      ref="createDrawerRef"
-      :title="drawerTitle"
-      :permissionList="treeData"
-      @change="reloadTable"
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-  import { reactive, ref, unref, h, onMounted } from 'vue';
-  import { useMessage } from 'naive-ui';
-  import { BasicColumn, BasicTable, TableAction } from '@/components/Table';
-  import { getRoleList } from '@/api/system/role';
-  import { getMenuList } from '@/api/system/menu';
-  import { columns } from './columns';
-  import { PlusOutlined } from '@vicons/antd';
-  import { getTreeAll } from '@/utils';
-  import CreateDrawer from './CreateDrawer.vue';
-
-  const formRef: any = ref(null);
-  const message = useMessage();
-  const actionRef = ref();
-
-  const showModal = ref(false);
-  const formBtnLoading = ref(false);
-  const checkedAll = ref(false);
-  const editRoleTitle = ref('');
-  const treeData = ref([]);
-  const expandedKeys = ref([]);
-  const checkedKeys = ref(['console', 'step-form']);
-  const createDrawerRef = ref();
-  const drawerTitle = ref('添加角色');
-
-  const params = reactive({
-    pageSize: 5,
-    name: 'xiaoMa',
-  });
-
-  const actionColumn: BasicColumn = reactive({
-    width: 250,
-    title: '操作',
-    key: 'action',
-    fixed: 'right',
-    render(record) {
-      return h(TableAction, {
-        style: 'button',
-        actions: [
-          {
-            label: '菜单权限',
-            onClick: handleMenuAuth.bind(null, record),
-            // 根据业务控制是否显示 isShow 和 auth 是并且关系
-            ifShow: () => {
-              return true;
-            },
-            // 根据权限控制是否显示: 有权限，会显示，支持多个
-            auth: ['basic_list'],
-          },
-          {
-            label: '编辑',
-            onClick: handleEdit.bind(null, record),
-            ifShow: () => {
-              return true;
-            },
-            auth: ['basic_list'],
-          },
-          {
-            label: '删除',
-            onClick: handleDelete.bind(null, record),
-            // 根据业务控制是否显示 isShow 和 auth 是并且关系
-            ifShow: () => {
-              return true;
-            },
-            // 根据权限控制是否显示: 有权限，会显示，支持多个
-            auth: ['basic_list'],
-          },
-        ],
-      });
-    },
-  });
-
-  const loadDataTable = async (res: any) => {
-    let _params = {
-      ...unref(params),
-      ...res,
-    };
-    return await getRoleList(_params);
-  };
-
-  function openCreateDrawer() {
-    const { openDrawer } = createDrawerRef.value;
-    openDrawer();
-  }
-
-  function onCheckedRow(rowKeys: any[]) {
-    console.log(rowKeys);
-  }
-
-  function reloadTable() {
-    actionRef.value.reload();
-  }
-
-  function confirmForm(e: any) {
-    e.preventDefault();
-    formBtnLoading.value = true;
-    formRef.value.validate((errors) => {
-      if (!errors) {
-        message.success('新建成功');
-        setTimeout(() => {
-          showModal.value = false;
-          reloadTable();
-        });
-      } else {
-        message.error('请填写完整信息');
-      }
-      formBtnLoading.value = false;
-    });
-  }
-
-  function handleEdit(record: Recordable) {
-    console.log('点击了编辑', record);
-    drawerTitle.value = '编辑角色';
-    const { openDrawer } = createDrawerRef.value;
-    openDrawer(record.roleId);
-  }
-
-  function handleDelete(record: Recordable) {
-    console.log('点击了删除', record);
-    message.info('点击了删除');
-  }
-
-  function handleMenuAuth(record: Recordable) {
-    editRoleTitle.value = `分配 ${record.name} 的菜单权限`;
-    checkedKeys.value = record.menu_keys;
-    showModal.value = true;
-  }
-
-  function checkedTree(keys) {
-    checkedKeys.value = [checkedKeys.value, ...keys];
-  }
-
-  function onExpandedKeys(keys) {
-    expandedKeys.value = keys;
-  }
-
-  function packHandle() {
-    if (expandedKeys.value.length) {
-      expandedKeys.value = [];
-    } else {
-      expandedKeys.value = treeData.value.map((item: any) => item.key) as [];
-    }
-  }
-
-  function checkedAllHandle() {
-    if (!checkedAll.value) {
-      checkedKeys.value = getTreeAll(treeData.value);
-      checkedAll.value = true;
-    } else {
-      checkedKeys.value = [];
-      checkedAll.value = false;
-    }
-  }
-
-  onMounted(async () => {
-    const treeMenuList = await getMenuList();
-    expandedKeys.value = treeMenuList.list.map((item) => item.key);
-    treeData.value = treeMenuList.list;
-  });
-</script>
-
-<style lang="less" scoped></style>
diff --git a/src/views/system/role/types/index.ts b/src/views/system/role/types/index.ts
deleted file mode 100644
index f280ffb..0000000
--- a/src/views/system/role/types/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export interface formParamsType {
-  roleId?: number | null;
-  roleName: string;
-  roleCode: string;
-  remark: string;
-  permissions: number[];
-  permissionKeys: number[];
-}