角色页面增加了与后端接口的交互

frontend/src/api/role/interface/index.ts

@@ -3,34 +3,64 @@ import type { ReqPage } from '@/api/interface'
 // 角色管理模块
 export namespace Role {
 
+    //资源接口
     export interface Permission{
-        key: string;             //权限名称
+      id: string;     //资源ID
-        label: string;           //权限ID
+      name: string;   //资源名称
-        disabled:boolean; //是否拥有该权限
+      code: string;   //资源代码
     }
 
+    //角色接口
+    export interface RoleBO {
+      id?: string;     //角色类型ID
+      name: string;   //角色类型名称
+      code: string;   //角色代码
+      type: number;   //角色类型
+      remark:string;   //角色描述
+    }
+
+    //角色+资源
+    export interface ReqRoleAndPermission extends RoleBO{
+      permissionList?:Permission[];   //角色权限列表
+    }
+
+    // 角色+分页
+    export interface ReqRoleParams extends ReqPage,RoleBO {
+
+    }
+
+
+
+    // export interface Permission{
+    //     key: string;             //权限名称
+    //     label: string;           //权限ID
+    //     disabled:boolean; //是否拥有该权限
+    // }
+
     // 角色列表
-    export interface ResRoleList {
+    // export interface ResRoleList {
-        id: string;     //角色类型ID
+    //     id: string;     //角色类型ID
-        rolename: string;   //角色类型名称
+    //     rolename: string;   //角色类型名称
-        status: number;  //角色类型状态
+    //     status: number;  //角色类型状态
-        describe:string;                //角色描述
+    //     describe:string;                //角色描述
-        permissionList?:Permission[];   //角色权限列表
+    //     permissionList?:Permission[];   //角色权限列表
-    }
+    // }
   
-    // 角色参数
+
-    export interface ReqRoleParams extends ReqPage {
+
-        id: string;     //角色类型ID
+
-        rolename: string;   //角色类型名称
+    // export interface ReqRoleParams extends ReqPage {
-        status: number;  //角色类型状态
+    //     id: string;     //角色类型ID
-        describe:string;                //角色描述
+    //     rolename: string;   //角色类型名称
-        permissionList?:Permission[];   //角色权限列表
+    //     status: number;  //角色类型状态
-    }
+    //     describe:string;                //角色描述
+    //     permissionList?:Permission[];   //角色权限列表
+    // }
     // 角色字典
-    export interface ResStatus {
+    // export interface ResStatus {
-      roleLabel: string;
+    //   roleLabel: string;
-      roleValue: number;
+    //   roleValue: number;
-    }
+    // }
   
     // export interface ResGender {
     //   genderLabel: string;
@@ -38,11 +68,11 @@ export namespace Role {
     // }
   
     //角色权限列表
-    export interface ResPermissionList {
+    // export interface ResPermissionList {
-      key: string;
+    //   key: string;
-      label: string;
+    //   label: string;
-      disable?: Permission[];
+    //   disable?: Permission[];
-    }
+    // }
   
     // export interface ResRole {
     //   id: string;

frontend/src/api/role/role.ts

@@ -8,40 +8,60 @@ import http from '@/api'
  */
 // 获取角色列表
 export const getRoleList = (params: Role.ReqRoleParams) => {
-   return http.post<ResPage<Role.ResRoleList>>(`/RoleList_Post`, params)
+    return http.post<ResPage<Role.RoleBO>>(`/role/list`, params)
-  // return http.post<ResPage<Role.ResRoleList>>(`${rePrefix}/role/list`, params)
 
+  //  return http.post<ResPage<Role.ResRoleList>>(`/RoleList_Post`, params)
+  // return http.post<ResPage<Role.ResRoleList>>(`${rePrefix}/role/list`, params)
 }
 
+// 新增角色
+export const addRole = (params: Role.RoleBO) => {
+  return http.post(`/role/add`, params)
+}
+
+// 编辑角色
+export const editRole = (params: Role.RoleBO) => {
+  return http.post(`/role/edit`, params)
+}
+
+// 删除角色
+export const deleteRole = (params: { id: string[] }) => {
+  return http.post(`/role/del`, params)
+}
+
+
+// 编辑角色资源
+export const editRoleAndPermission = (params: Role.ReqRoleAndPermission) => {
+  return http.post(`/role/edit_RoleAndPermission`, params)
+}
+
+
+
+
+
+
+
+
+
+
 // // 获取树形用户列表
 // export const getRoleTreeList = (params: Role.ReqRoleParams) => {
 //   return http.post<ResPage<Role.ResRoleList>>(`${rePrefix}/role/tree/list`, params)
 // }
 
-// 新增角色
+// export const addRole = (params: { id: string ; rolename: string;status: number; describe:string; }) => {
-export const addRole = (params: { id: string }) => {
+//   return http.post(`/RoleList_Add`, params)
-  return http.post(`/RoleList_Add`, params)
+// }
-}
 
 // 批量添加角色
-export const BatchAddRole = (params: FormData) => {
+// export const BatchAddRole = (params: FormData) => {
-  return http.post(`${rePrefix}/role/import`, params)
+//   return http.post(`${rePrefix}/role/import`, params)
-}
+// }
 
-// 编辑角色
+// // 切换角色状态
-export const editRole = (params: { id: string }) => {
+// export const changeRoleStatus = (params: { id: string; status: number }) => {
-  return http.post(`${rePrefix}/role/edit`, params)
+//   return http.post(`${rePrefix}/role/change`, params)
-}
+// }
-
-// 删除角色
-export const deleteRole = (params: { id: string[] }) => {
-  return http.post(`/RoleList_Del`, params)
-}
-
-// 切换角色状态
-export const changeRoleStatus = (params: { id: string; status: number }) => {
-  return http.post(`${rePrefix}/role/change`, params)
-}
 
 // 重置用户密码
 // export const resetUserPassWord = (params: { id: string }) => {
@@ -49,14 +69,14 @@ export const changeRoleStatus = (params: { id: string; status: number }) => {
 // }
 
 // 导出角色数据
-export const exportRoleInfo = (params: Role.ReqRoleParams) => {
+// export const exportRoleInfo = (params: Role.ReqRoleParams) => {
-  return http.download(`${rePrefix}/role/export`, params)
+//   return http.download(`${rePrefix}/role/export`, params)
-}
+// }
 
 // 获取角色状态字典
-export const getRoleStatus = () => {
+// export const getRoleStatus = () => {
-  return http.get<Role.ResStatus[]>(`${rePrefix}/role/status`)
+//   return http.get<Role.ResStatus[]>(`${rePrefix}/role/status`)
-}
+// }
 
 // 获取用户性别字典
 // export const getUserGender = () => {
@@ -64,9 +84,9 @@ export const getRoleStatus = () => {
 // }
 
 // 获取角色权限列表
-export const getRoleDepartment = () => {
+// export const getRoleDepartment = () => {
-  return http.get<Role.ResPermissionList[]>(`${rePrefix}/role/permission`)
+//   return http.get<Role.ResPermissionList[]>(`${rePrefix}/role/permission`)
-}
+// }
 
 // 获取用户角色字典
 // export const getUserRole = () => {

frontend/src/api/system/dictData.ts

@@ -65,6 +65,28 @@ const dictData: Dict[] = [
       },
     ],
   },
+  {
+    id: "4",
+    code: 'roleType',
+    label: '角色类型',
+    children: [
+      {
+        id: "0",
+        label: '超级管理员',
+        code: 0,
+      },
+      {
+        id: "1",
+        label: '管理员',
+        code: 1,
+      },
+      {
+        id: "2",
+        label: '普通角色',
+        code: 2,
+      },
+    ],
+  },
 ]
 
 export default dictData

frontend/src/views/authority/role/components/rolePopup.vue

@@ -0,0 +1,121 @@
+<template>
+    <!-- 基础信息弹出框 -->
+  <el-dialog :model-value="dialogVisible" :title="title" v-bind="dialogSmall" @close="handleCancel" width="500" draggable>
+    <div>
+        <el-form :model="data">
+        <el-form-item label="名称" :label-width="100">
+          <el-input v-model="data.name" placeholder="请输入名称" autocomplete="off" />
+        </el-form-item>
+        <el-form-item label="编码" :label-width="100">
+          <el-input v-model="data.code" placeholder="请输入编码" autocomplete="off" />
+        </el-form-item>
+        <el-form-item label="类型" :label-width="100">
+          <el-select v-model="data.type" placeholder="请选择类型" autocomplete="off">
+          <el-option
+            v-for="item in dictStore.getDictData('roleType')"
+            :key="item.id"
+            :label="item.label"
+            :value="item.id"
+          />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="描述" :label-width="100">
+          <el-input v-model="data.remark" :rows="2" type="textarea" placeholder="请输入备注" autocomplete="off" />
+        </el-form-item>
+      </el-form>
+      </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="handleCancel">取消</el-button>
+        <el-button type="primary" @click="handleOK">
+          保存
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+
+  </template>
+  
+  <script lang="ts" setup>
+  import { ref,computed  } from 'vue'
+  import { Role } from '@/api/role/interface'
+  import {dialogSmall} from '@/utils/elementBind'
+  import { useDictStore } from '@/stores/modules/dict'
+  import {
+    addRole,
+    editRole,
+  } from '@/api/role/role'
+
+  const dictStore = useDictStore()
+  const {dialogVisible,title,data,openType,updataList}  = defineProps<{
+    dialogVisible:boolean;
+    title:string;
+    openType:string;
+    data:{
+      id?: string;     //角色类型ID
+      name: string;   //角色类型名称
+      code: string;   //角色代码
+      type: number;
+      remark:string;   //角色描述
+    }
+    updataList:Function
+  }>();
+
+  // const value = computed({
+  //   // get: () => { 
+  //   //   if(title === '新增角色')
+  //   //     return true
+  //   //   data.status === 1
+  //   // },
+  //   // set: (value: boolean) => data.status = value ? 1 : 0
+  // })
+  
+  const emit = defineEmits<{
+  (e:'update:visible',value:boolean):void;
+  }>();
+
+  const handleCancel = () => {
+    emit('update:visible',false)
+  }
+  
+  const handleOK = () => {
+    
+  // const addData:Role.RoleBO = {
+  //   name: '', //角色类型名称
+  //   code: '',   //角色代码
+  //   type: 0,
+  //   remark:'',   //角色描述
+  // }
+
+  // addData.name = data.name
+  // addData.code = data.code
+    console.log(data);
+    if(openType === "add")
+  {
+    addRole(data).then(res => {
+      if(res.code === "200")
+      {
+        ElMessage.success(res.message)
+        updataList()
+      }
+      else
+        ElMessage.error(res.message)
+    })
+  }
+    
+  if(openType === "edit")
+  {
+    editRole(data).then(res => {
+      if(res.code === "200")
+      {
+        ElMessage.success(res.message)
+        updataList()
+      }
+      else
+        ElMessage.error(res.message)
+    })
+  }
+    emit('update:visible',false)
+  }
+  
+  </script>

frontend/src/views/authority/role/components/roleUnit.vue

@@ -1,84 +0,0 @@
-<template>
-    <!-- 基础信息弹出框 -->
-  <el-dialog :model-value="dialogVisible" :title="title" v-bind="dialogSmall" @close="handleCancel" width="500" draggable>
-    <div>
-        <el-form :model="data">
-        <el-form-item label="名称" :label-width="100">
-          <el-input v-model="data.rolename" placeholder="请输入名称" autocomplete="off" />
-        </el-form-item>
-        <el-form-item label="编码" :label-width="100">
-          <el-input v-model="data.id" placeholder="请输入编码" autocomplete="off" />
-        </el-form-item>
-        <el-form-item label="状态" :label-width="100">
-          <el-switch
-            v-model=value
-            inline-prompt
-            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
-            active-text="启用"
-            inactive-text="禁用"
-          />
-        </el-form-item>
-        <el-form-item label="备注" :label-width="100">
-          <el-input v-model="data.describe" :rows="2" type="textarea" placeholder="请输入备注" autocomplete="off" />
-        </el-form-item>
-      </el-form>
-      </div>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button @click="handleCancel">取消</el-button>
-        <el-button type="primary" @click="handleOK">
-          保存
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-
-  </template>
-  
-  <script lang="ts" setup>
-  import { ref,computed  } from 'vue'
-  import {dialogSmall} from '@/utils/elementBind'
-  import {
-    addRole,
-  } from '@/api/role/role'
-
-  const {dialogVisible,title,data,updataList}  = defineProps<{
-    dialogVisible:boolean;
-    title:string;
-    data:{
-      rolename:string;
-      id:string;
-      status:number;
-      describe:string;
-    }
-    updataList:Function
-  }>();
-
-  const value = computed({
-    get: () => { 
-      if(title === '新增角色')
-        return true
-      data.status === 1
-    },
-    set: (value: boolean) => data.status = value ? 1 : 0
-  })
-  
-  const emit = defineEmits<{
-  (e:'update:visible',value:boolean):void;
-  }>();
-
-  const handleCancel = () => {
-    emit('update:visible',false)
-  }
-  
-  const handleOK = () => {
-    addRole(data).then(res => {
-      if(res.code === "200")
-        ElMessage.success(res.message)
-
-        updataList()
-    })
-    emit('update:visible',false)
-  }
-  
-  </script>

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

@@ -9,7 +9,7 @@
         <!-- 表格 header 按钮 -->
         <template #tableHeader='scope'>
           <el-button type='primary' :icon='CirclePlus' @click="openDrawer('新增角色')">新增</el-button>
-          <el-button type='primary' :icon='Download' plain @click='downloadFile'>导出数据</el-button>
+          <el-button type='primary' :icon='Download' plain >导出数据</el-button>
           <el-button type='danger' :icon='Delete' plain :disabled='!scope.isSelected'
                      @click='batchDelete(scope.selectedListIds)'>
             批量删除
@@ -24,12 +24,13 @@
 
       </ProTable>
     </div>
-   <roleUnit 
+   <rolePopup 
-   :dialogVisible = roleUnitVisible 
+   :dialogVisible = rolePopupVisible 
-   :title = roleUnitTitle 
+   :title = rolePopupTitle 
-   :data = roleUnitData 
+   :data = rolePopupData 
+   :openType = openType
    :updataList = "updataList"
-   @update:visible="roleUnitVisible = $event"
+   @update:visible="rolePopupVisible = $event"
    />
   <permissionUnit 
   :dialogVisible = permissionUnitVisible 
@@ -45,7 +46,7 @@
   import { useDownload } from '@/hooks/useDownload'
   import { useAuthButtons } from '@/hooks/useAuthButtons'
   import ProTable from '@/components/ProTable/index.vue'
-  import roleUnit from './components/roleUnit.vue'
+  import rolePopup from './components/rolePopup.vue'
   import permissionUnit from './components/permissionUnit.vue'
   import ImportExcel from '@/components/ImportExcel/index.vue'
   import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
@@ -53,50 +54,48 @@
   import { CirclePlus, Delete, EditPen, Share, Download, Upload, View, Refresh } from '@element-plus/icons-vue'
   import roleDataList from '@/api/role/roleData'
   import { useDictStore } from '@/stores/modules/dict'
-   import {
+  import {
     getRoleList,
     addRole,
-    BatchAddRole,
     editRole,
     deleteRole,
-    changeRoleStatus,
-    exportRoleInfo,
-    getRoleDepartment,
-  
-    getRoleStatus,
   } from '@/api/role/role'
 
-  const {roleUnitVisible,permissionUnitVisible,roleUnitTitle,permissionUnitTitle,roleUnitData,permissionUnitData} = useCount();
+
+  const {rolePopupVisible,permissionUnitVisible,rolePopupTitle,permissionUnitTitle,rolePopupData,permissionUnitData} = useCount();
   function useCount() {
-    const roleUnitVisible = ref(false)
+    const rolePopupVisible = ref(false)
     const permissionUnitVisible = ref(false)
-    const roleUnitTitle = ref()
+    const rolePopupTitle = ref()
     const permissionUnitTitle = ref()
-    const roleUnitData = ref<Role.ResRoleList>({} as Role.ResRoleList)
+    const rolePopupData = ref<Role.RoleBO>({} as Role.RoleBO)
-    const permissionUnitData = ref<Role.ResRoleList>({} as Role.ResRoleList)
+    const permissionUnitData = ref<Role.RoleBO>({} as Role.RoleBO)
     // const permissionUnitData = ref<Role.Permission[]>([])
-    return {roleUnitVisible,permissionUnitVisible,roleUnitTitle,permissionUnitTitle,roleUnitData,permissionUnitData};
+    return {rolePopupVisible,permissionUnitVisible,rolePopupTitle,permissionUnitTitle,rolePopupData,permissionUnitData};
   }
 
   const dictStore = useDictStore()
+  let openType = ''
 
   //const roleData = roleDataList
-  const roleData = ref<Role.ResRoleList[]>([])
+  const roleData = ref<Role.RoleBO[]>([])
 
   function updataList() {
     getRoleList({
     id: '',
-    rolename: '',
+    name: '',
-    status: 0,
+    code: '',
-    describe: '',
+    type: 0,
+    remark: '',
     pageNum: 1,
-    pageSize: 10
+    pageSize: 10,
   }).then(res => {
+
     if(res.code == '200') {
       roleData.value = res.data.list
-
+  }
-      console.log(11111);
+  else{
-      
+    ElMessage.error(res.message)
   }
   })
   }
@@ -131,49 +130,72 @@
   const { BUTTONS } = useAuthButtons()
 
   // 表格配置项
-  const columns = reactive<ColumnProps<Role.ResRoleList>[]>([
+  const columns = reactive<ColumnProps<Role.RoleBO>[]>([
     { type: 'selection', fixed: 'left', width: 70 },
     { type: 'index', fixed: 'left', width: 70, label: '序号' },
     {
-      prop: 'rolename',
+      prop: 'name',
       label: '名称',
       search: { el: 'input' },
       minWidth: 150,
     },
     {
-      prop: 'id',
+      prop: 'code',
-
       label: '编码',
       search: { el: 'input' },
       minWidth: 180,
     },
     {
-      prop: 'describe',
+      prop: 'Type',
+      label: '类型',
+      enum: dictStore.getDictData('roleType'),
+      fieldNames: { label: 'label', value: 'code' },
+      search: { el: 'input' },
+      minWidth: 180,
+    },
+    {
+      prop: 'remark',
       label: '描述',
       minWidth: 380,
     },
-    {
+    // {
-      prop: 'status',
+    //   prop: 'status',
 
-      label: '状态',
+    //   label: '状态',
-      enum: dictStore.getDictData('status'),
+    //   enum: dictStore.getDictData('status'),
-      search: { el: 'tree-select', props: { filterable: true } },
+    //   search: { el: 'tree-select', props: { filterable: true } },
 
-      minWidth: 100,
+    //   minWidth: 100,
-      fieldNames: { label: 'label', value: 'code' },
+    //   fieldNames: { label: 'label', value: 'code' },
-      render: scope => {
+    //   render: scope => {
-        return (
+    //     return (
-           <el-tag type={scope.row.status ? 'success' : 'danger'}>{scope.row.status ? '启用' : '禁用'}</el-tag>
+    //        <el-tag type={scope.row.state ? 'success' : 'danger'}>{scope.row.state ? '启用' : '禁用'}</el-tag>
-        )
+    //     )
-      },
+    //   },
-    },
+    // },
     { prop: 'operation', label: '操作', fixed: 'right', width: 330 },
   ])
 
   // 删除角色信息
-  const deleteAccount = async (params: Role.ResRoleList) => {
+  const deleteAccount = async (params: Role.RoleBO) => {
-    await useHandleData(deleteRole, { id: [params.id] }, `删除【${params.rolename}】角色`)
+  if(params.id)
-    proTable.value?.getTableList()
+  {
+    let deleteData = {id:[params.id]}
+
+    deleteRole(deleteData).then(res => {
+    if(res.code === "200")
+    {
+      ElMessage.success(res.message)
+      updataList()
+    }
+    else
+      ElMessage.error(res.message)
+  })
+
+  }
+    
+    // await useHandleData(deleteRole, { id: [params.id] }, `删除【${params.name}】角色`)
+    // proTable.value?.getTableList()
     updataList()
   }
 
@@ -185,65 +207,70 @@
   }
 
  // 切换角色状态
-  const changeStatus = async (row: Role.ResRoleList) => {
+  const changeStatus = async (row: Role.RoleBO) => {
-    await useHandleData(changeRoleStatus, {
+    // await useHandleData(changeRoleStatus, {
-      id: row.id,
+    //   id: row.id,
-      status: row.status == 1 ? 0 : 1,
+    //   status: row.status == 1 ? 0 : 1,
-    }, `切换【${row.rolename}】角色状态`)
+    // }, `切换【${row.rolename}】角色状态`)
-    proTable.value?.getTableList()
+    // proTable.value?.getTableList()
   }
 
   // 导出角色列表
-  const downloadFile = async () => {
+  //const downloadFile = async () => {
-    ElMessageBox.confirm('确认导出角色数据?', '温馨提示', { type: 'warning' }).then(() =>
+    // ElMessageBox.confirm('确认导出角色数据?', '温馨提示', { type: 'warning' }).then(() =>
-      useDownload(exportRoleInfo, '角色列表', proTable.value?.searchParam),
+    //   useDownload(exportRoleInfo, '角色列表', proTable.value?.searchParam),
-    )
+    // )
-  }
+  //}
 
   // 批量添加角色
   const dialogRef = ref<InstanceType<typeof ImportExcel> | null>(null)
   const batchAdd = () => {
-    const params = {
+    // const params = {
-      title: '角色',
+    //   title: '角色',
-      tempApi: exportRoleInfo,
+    //   tempApi: exportRoleInfo,
-      importApi: BatchAddRole,
+    //   importApi: BatchAddRole,
-      getTableList: proTable.value?.getTableList,
+    //   getTableList: proTable.value?.getTableList,
-    }
+    // }
-    dialogRef.value?.acceptParams(params)
+    // dialogRef.value?.acceptParams(params)
   }
 
   // 打开 drawer(新增、查看、编辑)
-  const openDrawer = (title: string, row: Partial<Role.ResRoleList> = {}) => {
+  const openDrawer = (title: string, row: Partial<Role.RoleBO> = {}) => {
     if(title === "新增角色" || title === '编辑角色' )
     {
-      roleUnitVisible.value = true
+      if(title === "新增角色")
-      roleUnitTitle.value = title
+        openType = "add"
+      else if(title === '编辑角色')
+        openType = "edit"
+
+      rolePopupVisible.value = true
+      rolePopupTitle.value = title
     
-      const safeRow: Role.ResRoleList = {
+      const safeRow: Role.RoleBO = {
         id: row.id || '',
-        rolename: row.rolename || '',
+        name: row.name || '',
-        status: row.status || 0,
+        code: row.code || '',
-        describe: row.describe || '',
+        type: row.type || 0,
-        permissionList: row.permissionList || []
+        remark: row.remark || '',
       };
 
-      roleUnitData.value = safeRow;
+      rolePopupData.value = safeRow;
     }
     else if(title === "设置权限")
     {
       permissionUnitVisible.value = true
       permissionUnitTitle.value = title
 
-      const safeRow: Role.ResRoleList = {
+      const safeRow: Role.RoleBO = {
         id: row.id || '',
-        rolename: row.rolename || '',
+        name: row.name || '',
-        status: row.status || 0,
+        code: row.code || '',
-        describe: row.describe || '',
+        type: row.type || 0,
-        permissionList: row.permissionList || []
+        remark: row.remark || '',
       };
 
       permissionUnitData.value = safeRow;
-      console.log(111,permissionUnitData);
+
       // if (row.permissionList) 
       // {
       //   permissionUnitData.value = row.permissionList;