From c1249506fbaf9cb5a76bf580e95d8dc46601601f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E7=BA=A2=E4=B8=BD?= <1181930680@qq.com>
Date: Wed, 10 Jul 2024 15:24:27 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=92=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/system/role.ts                    |  24 ++-
 src/components/Table/src/Table.vue        |   1 +
 src/layout/components/Sider/ReSubMenu.vue |   1 +
 src/settings/componentSetting.ts          |   4 +-
 src/views/system/menu/edit.vue            |   2 +-
 src/views/system/role/CreateDrawer.vue    | 202 -------------------
 src/views/system/role/auth.vue            | 132 +++++++++++++
 src/views/system/role/columns.ts          |  11 +-
 src/views/system/role/edit.vue            | 120 ++++++++++++
 src/views/system/role/index.vue           | 224 +++++++---------------
 src/views/system/role/types/index.ts      |   8 -
 src/views/system/user/edit.vue            |   5 +-
 src/views/system/user/index.vue           |  13 +-
 src/views/system/user/querySchemas.ts     |   3 +-
 14 files changed, 365 insertions(+), 385 deletions(-)
 delete mode 100644 src/views/system/role/CreateDrawer.vue
 create mode 100644 src/views/system/role/auth.vue
 create mode 100644 src/views/system/role/edit.vue
 delete mode 100644 src/views/system/role/types/index.ts

diff --git a/src/api/system/role.ts b/src/api/system/role.ts
index 197a718..23d9c59 100644
--- a/src/api/system/role.ts
+++ b/src/api/system/role.ts
@@ -58,9 +58,29 @@ export function roleDelete(roleId) {
 /**
  * @description: 批量删除角色
  */
-export function roleBatchDelete(roleId) {
+export function roleBatchDelete(data) {
   return http.request({
-    url: '/role/batchDelete/'+roleId,
+    url: '/role/batchDelete',
     method: 'DELETE',
+    data
+  });
+}
+/**
+ * @description: 获取角色菜单
+ */
+export function getRoleMenuList(roleId) {
+  return http.request({
+    url: '/role/menu/list/'+roleId,
+    method: 'get',
+  });
+}
+/**
+ * @description: 保存角色菜单
+ */
+export function roleMenuSave(data:any) {
+  return http.request({
+    url: '/role/menu/save',
+    method: 'POST',
+    data,
   });
 }
\ No newline at end of file
diff --git a/src/components/Table/src/Table.vue b/src/components/Table/src/Table.vue
index a75510b..58fd48e 100644
--- a/src/components/Table/src/Table.vue
+++ b/src/components/Table/src/Table.vue
@@ -103,6 +103,7 @@
       <div class="flex justify-end s-table-pagination" v-if="pagination && isObject(pagination)">
         <el-pagination
           v-model:current-page="pagination.currentPage"
+          :page-sizes="pagination.pageSizes"
           :page-size="pagination.pageSize"
           :layout="pagination.layout"
           :total="pagination.total"
diff --git a/src/layout/components/Sider/ReSubMenu.vue b/src/layout/components/Sider/ReSubMenu.vue
index 2ad67e8..48edd78 100644
--- a/src/layout/components/Sider/ReSubMenu.vue
+++ b/src/layout/components/Sider/ReSubMenu.vue
@@ -7,6 +7,7 @@
     <template v-for="(item, key) in parent.children" :key="item.key">
       <el-menu-item v-if="!item.children" :index="item.key">
         <template #title>
+          <icon :name="item.icon" :size="20" v-if="item.icon"/>
           <span>{{ item.title }}</span>
         </template>
       </el-menu-item>
diff --git a/src/settings/componentSetting.ts b/src/settings/componentSetting.ts
index 0bf8367..3dd883a 100644
--- a/src/settings/componentSetting.ts
+++ b/src/settings/componentSetting.ts
@@ -2,9 +2,9 @@ export default {
   table: {
     apiSetting: {
       // 当前页的字段名
-      pageField: 'current',
+      pageField: 'pageNo',
       // 每页数量字段名
-      sizeField: 'size',
+      sizeField: 'pageSize',
       // 接口返回的数据字段名
       listField: 'records',
       // 接口返回总页数字段名
diff --git a/src/views/system/menu/edit.vue b/src/views/system/menu/edit.vue
index 2dc9ab4..aab45f8 100644
--- a/src/views/system/menu/edit.vue
+++ b/src/views/system/menu/edit.vue
@@ -87,7 +87,7 @@
         </div>
       </el-form-item>
       <el-form-item
-          v-if="formData.type == 0 && formData.target ==0"
+          v-if="formData.type == 0 && formData.target ==0 && formData.parentId!=0"
           label="组件路径"
           prop="component"
           :rules="{ required: true, message: '请输入组件路径', trigger: 'blur' }"
diff --git a/src/views/system/role/CreateDrawer.vue b/src/views/system/role/CreateDrawer.vue
deleted file mode 100644
index fe2da0e..0000000
--- a/src/views/system/role/CreateDrawer.vue
+++ /dev/null
@@ -1,202 +0,0 @@
-<template>
-  <el-drawer
-    v-model="isDrawer"
-    :width="width"
-    placement="right"
-    :title="title"
-    @close="handleReset"
-  >
-    <el-form
-      :model="formParams"
-      :rules="rules"
-      ref="formRef"
-      label-placement="left"
-      :label-width="80"
-    >
-      <el-form-item label="角色编码" prop="roleCode">
-        <el-input
-          placeholder="请输入角色编码"
-          v-model="formParams.roleCode"
-          :disabled="formParams.roleId ? true : false"
-        />
-      </el-form-item>
-
-      <el-form-item label="角色名称" prop="roleName">
-        <el-input placeholder="请输入角色名称" v-model="formParams.roleName" />
-      </el-form-item>
-      <el-form-item label="角色权限" prop="permissionIds">
-        <el-card shadow="hover">
-          <el-space>
-            <el-checkbox v-model:checked="isSpread" @change="packHandle">展开/收起</el-checkbox>
-            <el-checkbox v-model:checked="isAll" @change="handleCheckAll">全选/全不选</el-checkbox>
-          </el-space>
-          <el-divider />
-          <el-tree
-            ref="treeRef"
-            show-checkbox
-            node-key="key"
-            :data="props.permissionList"
-            @check="checkedTree"
-          />
-        </el-card>
-      </el-form-item>
-      <el-form-item label="备注" prop="remark">
-        <el-input type="textarea" placeholder="请输入备注" v-model="formParams.remark" />
-      </el-form-item>
-    </el-form>
-
-    <template #footer>
-      <el-space>
-        <el-button @click="handleReset">重置</el-button>
-        <el-button type="primary" :loading="subLoading" @click="formSubmit">提交</el-button>
-      </el-space>
-    </template>
-  </el-drawer>
-</template>
-
-<script lang="ts" setup>
-  import { ref, onMounted } from 'vue';
-  import { ElMessage } from 'element-plus';
-  import type { formParamsType } from './types';
-  import { getTreeValues } from '@/utils/helper/treeHelper';
-
-  const rules = {
-    roleCode: {
-      required: true,
-      message: '角色编码不能为空',
-      trigger: 'blur',
-    },
-    roleName: {
-      required: true,
-      message: '角色名称不能为空',
-      trigger: 'blur',
-    },
-  };
-
-  defineEmits(['change']);
-
-  const props = defineProps({
-    title: {
-      type: String,
-      default: '添加角色',
-    },
-    width: {
-      type: Number,
-      default: 450,
-    },
-    permissionList: {
-      type: Array,
-    },
-  });
-
-  const defaultValueRef = () => ({
-    roleId: null,
-    roleName: '',
-    roleCode: '',
-    remark: '',
-    permissions: [],
-    permissionKeys: [],
-  });
-
-  const message = ElMessage;
-  const checkedKeys = ref<number[]>([]);
-  const formRef: any = ref(null);
-  const isDrawer = ref(false);
-  const subLoading = ref(false);
-  const isSpread = ref(false);
-  const isAll = ref(false);
-  const treeRef = ref();
-  const expandedKeys = ref();
-
-  const formParams = ref<formParamsType>(defaultValueRef());
-
-  function treeNodeExpand(status) {
-    for (var i = 0; i < treeRef.value.store._getAllNodes().length; i++) {
-      treeRef.value.store._getAllNodes()[i].expanded = status;
-    }
-  }
-
-  function packHandle(value) {
-    if (value) {
-      treeNodeExpand(true);
-      expandedKeys.value = props?.permissionList?.map((item: any) => item.key as string) as [];
-    } else {
-      expandedKeys.value = [];
-      treeNodeExpand(false);
-    }
-  }
-
-  function handleCheckAll(value) {
-    if (!value) {
-      formParams.value.permissions = [];
-      treeRef.value!.setCheckedKeys([]);
-    } else {
-      formParams.value.permissions = getAllIds(
-        props?.permissionList as { key: number; children: [] }[],
-      );
-      const keys = getTreeValues(props.permissionList || [], 'key');
-      treeRef.value!.setCheckedKeys(keys);
-    }
-  }
-
-  function getAllIds(list: { key: number; children: [] }[] = [], ids: number[] = []) {
-    for (let item of list) {
-      !ids.includes(item.key) && ids.push(item.key);
-      if (item.children && item.children.length) getAllIds(item.children, ids);
-    }
-    return ids;
-  }
-
-  function checkedTree(_, checkedInfo) {
-    const keys = checkedInfo.checkedKeys;
-    const halfKeys = checkedInfo.halfCheckedKeys;
-    formParams.value.permissions = keys;
-    checkedKeys.value = keys;
-    formParams.value.permissionKeys = halfKeys;
-  }
-
-  function openDrawer(roleId?) {
-    if (roleId) {
-      formParams.value.roleId = roleId;
-      // 凭角色id 获取角色信息
-      getInfo();
-      return;
-    }
-    isDrawer.value = true;
-  }
-
-  function closeDrawer() {
-    isDrawer.value = false;
-  }
-
-  function formSubmit() {
-    formRef.value.validate((valid) => {
-      if (!valid) {
-        return message.error('请填写完整信息');
-      }
-      console.log(formParams.value);
-      // TOOD 请自行对接接口
-      message.success('操作成功');
-      closeDrawer();
-    });
-  }
-
-  function handleReset() {
-    formRef.value.resetFields();
-    formParams.value = Object.assign(formParams.value, defaultValueRef());
-    treeRef.value!.setCheckedKeys([]);
-  }
-
-  function getInfo() {
-    // 拿到信息 赋值给表单
-    // formParams.value = res;
-    isDrawer.value = true;
-  }
-
-  onMounted(() => {});
-
-  defineExpose({
-    openDrawer,
-    closeDrawer,
-  });
-</script>
diff --git a/src/views/system/role/auth.vue b/src/views/system/role/auth.vue
new file mode 100644
index 0000000..0c3b879
--- /dev/null
+++ b/src/views/system/role/auth.vue
@@ -0,0 +1,132 @@
+<template>
+  <el-dialog
+      v-model="props.visible"
+      title="权限设置"
+      :append-to-body="true"
+      width="500"
+      :close-on-click-modal="false"
+      modal-class="roleMenuDialog"
+      :before-close="dialogClose"
+  >
+    <el-form
+        class="ls-form"
+        ref="formRef"
+        label-width="60px"
+    >
+      <el-form-item label="权限" prop="menus">
+        <div>
+          <el-checkbox label="展开/折叠" @change="handleExpand"/>
+          <el-checkbox label="全选/不全选" @change="handleSelectAll"/>
+          <div>
+            <el-tree
+                ref="treeRef"
+                :data="menuTree"
+                :props="{
+                    label: 'name',
+                    children: 'children',
+                  }"
+                node-key="id"
+                :default-expand-all="isExpand"
+                show-checkbox
+            />
+          </div>
+        </div>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="dialogClose">取消</el-button>
+        <el-button :loading="subLoading" type="primary" @click="submit">
+          确定
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script lang="ts" setup>
+import type {CheckboxValueType, ElTree, FormInstance} from "element-plus";
+import {getRoleMenuList,roleMenuSave} from "@/api/system/role";
+import {message,buildTree} from "@/utils/auth";
+import {nextTick, onMounted, ref, shallowRef} from "vue";
+import {useLockFn} from "@/utils/useLockFn";
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    required: true,
+    default: false
+  },
+  roleId: {
+    type: Number,
+    required: true,
+    default: 0
+  }
+});
+const emit = defineEmits(["success", "update:visible"]);
+const treeRef = shallowRef<InstanceType<typeof ElTree>>();
+const formRef = shallowRef<FormInstance>();
+const isExpand = ref(false);
+const menuArray = ref<any[]>([]);
+const menuTree = ref<any[]>([]);
+
+// 获取所有选择的节点
+const getDeptAllCheckedKeys = () => {
+  const checkedKeys = treeRef.value?.getCheckedKeys();
+  return checkedKeys;
+};
+
+const handleExpand = (check: CheckboxValueType) => {
+  const treeList = menuTree.value;
+  for (let i = 0; i < treeList.length; i++) {
+    treeRef.value.store.nodesMap[treeList[i].id].expanded = check;
+  }
+};
+
+const handleSelectAll = (check: CheckboxValueType) => {
+  if (check) {
+    treeRef.value?.setCheckedKeys(menuArray.value.map((item) => item.id));
+  } else {
+    treeRef.value?.setCheckedKeys([]);
+  }
+};
+
+const handleSubmit = async () => {
+    await formRef.value?.validate();
+    const menuIds = getDeptAllCheckedKeys()!;
+    await roleMenuSave({menuIds,roleId:props.roleId});
+    message("操作成功");
+    emit("update:visible", false);
+    emit("success");
+};
+
+const { isLock:subLoading,lockFn: submit } = useLockFn(handleSubmit);
+
+const dialogClose = () => {
+  emit("update:visible", false);
+};
+
+const setFormData = async () => {
+  const data = await getRoleMenuList(props.roleId);
+  menuTree.value = buildTree(data);
+  menuArray.value =data;
+  nextTick(()=>{
+    let ids = [];
+    menuArray.value.map(item=>{
+      if(item.checked){
+        ids.push(item.id)
+      }
+    })
+    treeRef.value?.setCheckedKeys(ids,true, false);
+  })
+};
+
+onMounted(() => {
+  setFormData();
+});
+</script>
+<style lang="scss">
+.roleMenuDialog .el-dialog__body {
+  max-height:600px;
+  overflow: auto
+}
+</style>
diff --git a/src/views/system/role/columns.ts b/src/views/system/role/columns.ts
index 68ef6e8..12c6ae5 100644
--- a/src/views/system/role/columns.ts
+++ b/src/views/system/role/columns.ts
@@ -3,17 +3,24 @@ import { ElTag } from 'element-plus';
 
 export const columns = [
   {
-    label: 'id',
-    prop: 'id',
+    type: 'selection',
   },
   {
     label: '角色名称',
     prop: 'name',
   },
+  {
+    label: '角色编码',
+    prop: 'code',
+  },
   {
     label: '说明',
     prop: 'note',
   },
+  {
+    label: '创建人',
+    prop: 'createUser',
+  },
   {
     label: '创建时间',
     prop: 'createTime',
diff --git a/src/views/system/role/edit.vue b/src/views/system/role/edit.vue
new file mode 100644
index 0000000..3a48bc2
--- /dev/null
+++ b/src/views/system/role/edit.vue
@@ -0,0 +1,120 @@
+<template>
+  <el-dialog
+      v-model="props.visible"
+      :title="props.roleId?'编辑':'新增'"
+      :append-to-body="true"
+      width="500"
+      :close-on-click-modal="false"
+      :before-close="dialogClose"
+  >
+    <el-form
+        class="ls-form"
+        ref="formRef"
+        :model="formData"
+        label-width="60px"
+    >
+      <el-form-item
+          label="名称"
+          prop="name"
+          :rules="{ required: true, message: '请输入名称', trigger: 'blur' }"
+      >
+        <el-input
+            class="ls-input"
+            v-model="formData.name"
+            placeholder="请输入名称"
+            clearable
+        />
+      </el-form-item>
+      <el-form-item
+          label="编码"
+          prop="code"
+          :rules="{ required: true, message: '请输入编码', trigger: 'blur' }"
+      >
+        <el-input
+            class="ls-input"
+            v-model="formData.code"
+            placeholder="请输入编码"
+            clearable
+        />
+      </el-form-item>
+      <el-form-item label="排序" prop="sort">
+        <el-input-number v-model="formData.sort"/>
+      </el-form-item>
+      <el-form-item label="备注" prop="note">
+          <el-input v-model="formData.note" type="textarea" placeholder="请输入备注" clearable />
+        </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="dialogClose">取消</el-button>
+        <el-button :loading="subLoading" type="primary" @click="submit">
+          确定
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script lang="ts" setup>
+import type {FormInstance} from "element-plus";
+import {getRoleDetail,roleAdd,roleUpdate} from "@/api/system/role";
+import {onMounted, reactive, shallowRef} from "vue";
+import {message} from "@/utils/auth";
+import {useLockFn} from "@/utils/useLockFn";
+
+const emit = defineEmits(["success", "update:visible"]);
+const formRef = shallowRef<FormInstance>();
+const formData = reactive({
+  id: "",
+  name: "",
+  code: "",
+  sort: 0,
+  note:'',
+  menus: []
+});
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    required: true,
+    default: false
+  },
+  roleId: {
+    type: Number,
+    required: true,
+    default: 0
+  }
+});
+
+const handleSubmit = async () => {
+    await formRef.value?.validate();
+    const params = {...formData, menuIds: formData.menus.join()};
+    props.roleId ? await roleUpdate(params) : await roleAdd(params);
+    message("操作成功");
+    emit("update:visible", false);
+    emit("success");
+};
+
+const dialogClose = () => {
+  emit("update:visible", false);
+};
+
+const { isLock:subLoading,lockFn: submit } = useLockFn(handleSubmit);
+
+
+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();
+  }
+});
+
+</script>
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index ae62e8d..09b428e 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -7,10 +7,10 @@
         :row-key="(row) => row.id"
         ref="tableRef"
         :actionColumn="actionColumn"
-        @checked-row-change="onCheckedRow"
+         @selection-change="onSelectionChange"
       >
         <template #tableTitle>
-          <el-button type="primary" @click="openCreateDrawer">
+          <el-button type="primary" @click="handleAdd">
             <template #icon>
               <el-icon class="el-input__icon">
                 <PlusOutlined />
@@ -18,6 +18,14 @@
             </template>
             添加角色
           </el-button>
+          <el-button type="danger" @click="handleDelete()" :disabled="!selectionData.length">
+              <template #icon>
+                <el-icon class="el-input__icon">
+                  <Delete />
+                </el-icon>
+              </template>
+              删除
+            </el-button>
         </template>
 
         <template #action>
@@ -26,79 +34,42 @@
       </BasicTable>
     </el-card>
 
-    <el-dialog v-model="showModal" draggable :title="editRoleTitle" :width="550">
-      <div class="py-3 menu-list">
-        <el-tree
-          ref="treeRef"
-          show-checkbox
-          node-key="key"
-          :data="treeData"
-          style="max-height: 950px; overflow: hidden"
-          @update:checked-keys="checkedTree"
-          @update:expanded-keys="onExpandedKeys"
-        />
-      </div>
-      <template #footer>
-        <el-space>
-          <el-button plain icon-placement="left" @click="packHandle">
-            全部{{ expandAllStatus ? '收起' : '展开' }}
-            <el-icon class="el-icon--right" v-if="expandAllStatus"><arrow-up /> </el-icon>
-            <el-icon class="el-icon--right" v-else><arrow-down /></el-icon>
-          </el-button>
-
-          <el-button plain icon-placement="left" @click="checkedAllHandle">
-            全部{{ checkedAll ? '取消' : '选择' }}
-          </el-button>
-          <el-button type="primary" :loading="formBtnLoading" @click="confirmForm"
-            >保存提交</el-button
-          >
-        </el-space>
-      </template>
-    </el-dialog>
-
-    <CreateDrawer
-      ref="createDrawerRef"
-      :title="drawerTitle"
-      :permissionList="treeData"
-      @change="reloadTable"
-    />
+    <editDialog
+        v-if="editVisible"
+        :roleId="roleId"
+        v-model:visible="editVisible"
+        @success="reloadTable"
+    >
+    </editDialog>
+    <authDialog
+        v-if="authVisible"
+        :roleId="roleId"
+        v-model:visible="authVisible"
+        @success="reloadTable"
+    >
+    </authDialog>
   </PageWrapper>
 </template>
 
 <script lang="ts" setup>
-  import { reactive, ref, unref, h, onMounted } from 'vue';
+  import { reactive, ref, h,nextTick,defineAsyncComponent } from 'vue';
   import { ElMessage } from 'element-plus';
   import { BasicTable, TableAction } from '@/components/Table';
-  import { getRoleList } from '@/api/system/role';
-  import { getMenuList } from '@/api/system/menu';
+  import { getRoleList,roleDelete,roleBatchDelete } from '@/api/system/role';
   import { columns } from './columns';
   import { PlusOutlined } from '@vicons/antd';
-  import { getTreeAll } from '@/utils';
-  import { useRouter } from 'vue-router';
-  import { ArrowDown, ArrowUp } from '@element-plus/icons-vue';
-  import CreateDrawer from './CreateDrawer.vue';
-
-  const router = useRouter();
-  const formRef: any = ref(null);
-
+  import {message,confirm} from "@/utils/auth";
+  const editDialog = defineAsyncComponent(() =>
+    import('./edit.vue')
+)
+const authDialog = defineAsyncComponent(() =>
+    import('./auth.vue')
+)
+const roleId =ref(0)
+const editVisible=ref(false)
+const authVisible=ref(false)
+  const selectionData = ref([])
   const tableRef = ref();
-  const treeRef = ref();
-
-  const showModal = ref(false);
-  const expandAllStatus = 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: 20,
-    name: '',
-  });
 
   const actionColumn = reactive({
     width: 250,
@@ -111,31 +82,34 @@
         actions: [
           {
             label: '分配权限',
-            onClick: handleMenuAuth.bind(null, record),
+            type: 'warning',
+            onClick: handleAuth.bind(null, record),
             // 根据业务控制是否显示 isShow 和 auth 是并且关系
             ifShow: () => {
               return true;
             },
             // 根据权限控制是否显示: 有权限，会显示，支持多个
-            auth: ['basic_list'],
+            // auth: ['basic_list'],
           },
           {
             label: '编辑',
+            type: 'warning',
             onClick: handleEdit.bind(null, record),
             ifShow: () => {
               return true;
             },
-            auth: ['basic_list'],
+            // auth: ['basic_list'],
           },
           {
             label: '删除',
+            type: 'danger',
             onClick: handleDelete.bind(null, record),
             // 根据业务控制是否显示 isShow 和 auth 是并且关系
             ifShow: () => {
               return true;
             },
             // 根据权限控制是否显示: 有权限，会显示，支持多个
-            auth: ['basic_list'],
+            // auth: ['basic_list'],
           },
         ],
       });
@@ -144,105 +118,45 @@
 
   const loadDataTable = async (res: any) => {
     let _params = {
-      ...unref(params),
       ...res,
     };
     return await getRoleList(_params);
   };
 
-  function openCreateDrawer() {
-    drawerTitle.value = '添加角色';
-    const { openDrawer } = createDrawerRef.value;
-    openDrawer();
-  }
-
-  function onCheckedRow(rowKeys: any[]) {
-    console.log(rowKeys);
-  }
-
   function reloadTable() {
     tableRef.value.reload();
   }
 
-  function confirmForm(e: any) {
-    e.preventDefault();
-    formBtnLoading.value = true;
-    formRef.value.validate((errors) => {
-      if (!errors) {
-        ElMessage.success('新建成功');
-        setTimeout(() => {
-          showModal.value = false;
-          reloadTable();
-        });
-      } else {
-        ElMessage.error('请填写完整信息');
-      }
-      formBtnLoading.value = false;
-    });
-  }
+  const handleAdd = async () => {
+  roleId.value=0
+  await nextTick();
+  editVisible.value=true
+};
 
-  function handleEdit(record: Recordable) {
-    console.log('点击了编辑', record);
-    drawerTitle.value = '编辑角色';
-    const { openDrawer } = createDrawerRef.value;
-    openDrawer(record.roleId);
-  }
+const handleEdit = async (record: Recordable) => {
+  roleId.value=record.row.id
+  await nextTick();
+  editVisible.value=true
+};
+const handleAuth = async (record: Recordable) => {
+  roleId.value=record.row.id
+  await nextTick();
+  authVisible.value=true
+};
 
-  function handleDelete(record: Recordable) {
-    console.log('点击了删除', record);
-    ElMessage.info('点击了删除');
-  }
-
-  function handleMenuAuth(record: Recordable) {
-    editRoleTitle.value = `分配 ${record.row.name} 权限`;
-    checkedKeys.value = record.row.menu_keys;
-    showModal.value = true;
-  }
-
-  function checkedTree(keys) {
-    checkedKeys.value = [checkedKeys.value, ...keys];
-  }
-
-  function onExpandedKeys(keys) {
-    expandedKeys.value = keys;
-  }
-
-  async function packHandle() {
-    if (expandAllStatus.value) {
-      treeNodeExpand(false);
-      expandAllStatus.value = false;
-    } else {
-      treeNodeExpand(true);
-      expandAllStatus.value = true;
+async function handleDelete(record: Recordable) {
+    let ids = []
+    if(!record){
+      ids = selectionData.value.map(({id}) => id);
     }
+    await confirm('确定要删除？');
+    record? await roleDelete(record.row.id):await roleBatchDelete(ids);
+    message("删除成功");
+    reloadTable()
   }
-
-  function checkedAllHandle() {
-    if (!checkedAll.value) {
-      checkedKeys.value = getTreeAll(treeData.value);
-      treeRef.value!.setCheckedKeys(getTreeAll(treeData.value));
-      checkedAll.value = true;
-    } else {
-      checkedKeys.value = [];
-      checkedAll.value = false;
-      treeRef.value!.setCheckedKeys([]);
-    }
+function onSelectionChange(value){
+    selectionData.value = value
   }
-
-  function treeNodeExpand(status) {
-    for (var i = 0; i < treeRef.value.store._getAllNodes().length; i++) {
-      treeRef.value.store._getAllNodes()[i].expanded = status;
-    }
-  }
-
-  onMounted(async () => {
-    const treeMenuList = await getMenuList();
-    treeMenuList.forEach((item) => {
-      item.expanded = false;
-    });
-    expandedKeys.value = treeMenuList.map((item) => item.key);
-    treeData.value = treeMenuList;
-  });
 </script>
 
 <style lang="scss" 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[];
-}
diff --git a/src/views/system/user/edit.vue b/src/views/system/user/edit.vue
index cc26d51..932f261 100644
--- a/src/views/system/user/edit.vue
+++ b/src/views/system/user/edit.vue
@@ -94,7 +94,6 @@
         <el-form-item label="备注" prop="note" class="flex-1">
           <el-input v-model="formData.note" type="textarea" placeholder="请输入备注" clearable />
         </el-form-item>
-
       </div>
       <el-form-item label="头像" prop="images">
         <BasicUpload :action="`${uploadUrl}/api/upload/uploadFile`" :list="formData.avatar?[{name:formData.avatarName,url:formData.avatar}]:[]" :headers="uploadHeaders"
@@ -116,12 +115,12 @@
 import { getUserDetail, userAdd, userUpdate } from '@/api/system/user';
 import { BasicUpload } from '@/components/Upload';
 import chinaArea from '@/components/ChinaArea/index.vue';
-import { computed, onMounted, reactive, shallowRef, ref, unref } from "vue";
+import {  onMounted, reactive, shallowRef } from "vue";
 import { getRoleAllList } from '@/api/system/role';
 import { getDeptList } from '@/api/system/dept';
 import { getLevelAllList } from '@/api/system/level';
 import { getPositionAllList } from '@/api/system/position';
-import {buildTree, message } from "@/utils/auth";
+import {buildTree } from "@/utils/auth";
 import { FormInstance } from "element-plus";
 
 const formRef = shallowRef<FormInstance>();
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index 75d5663..e684a78 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -97,23 +97,18 @@
   const upload = ref<UploadInstance>();
   const exportLoading=ref(false)
   const editDialog = defineAsyncComponent(() =>
-    import('./edit.vue')
-)
+    import('./edit.vue'))
 const uploadHeaders = reactive({
     authorization:useUserStore().getToken
   });
   const formParams = reactive({
-    username: '',
+    realname: '',
     mobile: '',
     role:'',
     email: '',
     status:'',
   });
 
-  const params = ref({
-    pageSize: 20,
-    name: '',
-  });
 
   const actionColumn = reactive({
     width: 250,
@@ -159,7 +154,7 @@ const uploadHeaders = reactive({
   });
 
   const loadDataTable = async (res) => {
-    const result = await getUserList({ ...formParams, ...params.value, ...res });
+    const result = await getUserList({ ...formParams, ...res });
     tableData.value = result.records;
     return result;
   };
@@ -181,7 +176,7 @@ const uploadHeaders = reactive({
   
 
   async function handleDelete(record: Recordable) {
-    let ids = ''
+    let ids = []
     if(!record){
       ids = selectionData.value.map(({id}) => id);
     }
diff --git a/src/views/system/user/querySchemas.ts b/src/views/system/user/querySchemas.ts
index ba96db0..5b92b0c 100644
--- a/src/views/system/user/querySchemas.ts
+++ b/src/views/system/user/querySchemas.ts
@@ -13,7 +13,7 @@ export const loadSelectData = async(res)=> {
 }
 export const schemas: FormSchema[] = [
   {
-    field: 'username',
+    field: 'realname',
     component: 'Input',
     label: '用户名',
     componentProps: {
@@ -36,6 +36,7 @@ export const schemas: FormSchema[] = [
     componentProps: {
       placeholder: '请选择角色',
       block:true,
+      multiple:true,
       request: loadSelectData,
       onChange: (e: any) => {
         console.log(e);