角色管理

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

@@ -24,41 +24,27 @@
     </ProTable>
   </div>
   <RolePopup :refresh-table='proTable?.getTableList' ref='rolePopup' />
-
+  <RoleResourcePopup :refresh-table='proTable?.getTableList' ref='roleResourcePopup' />
 </template>
 
 <script setup lang='tsx' name='useRole'>
 import { type Role } from '@/api/role/interface'
+import { type Function } from '@/api/function/interface'
 import { useHandleData } from '@/hooks/useHandleData'
 import ProTable from '@/components/ProTable/index.vue'
 import type{  ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
 import { CirclePlus, Delete, EditPen, Share, Download, Upload, View, Refresh } from '@element-plus/icons-vue'
-import { useDictStore } from '@/stores/modules/dict'
-import {getRoleList,deleteRole} from '@/api/role/role'
+import {getRoleList,deleteRole,getFunctionList} from '@/api/role/role'
 import RolePopup from './components/rolePopup.vue'
-import { reactive, ref } from 'vue'
-
-
-const { rolePopupVisible, permissionUnitVisible, rolePopupTitle, permissionUnitTitle, rolePopupData, permissionUnitData } = useCount()
-
-function useCount() {
-  const rolePopupVisible = ref(false)
-  const permissionUnitVisible = ref(false)
-  const rolePopupTitle = ref()
-  const permissionUnitTitle = ref()
-  const rolePopupData = ref<Role.RoleBO>({} as Role.RoleBO)
-  const permissionUnitData = ref<Role.RoleBO>({} as Role.RoleBO)
-  // const permissionUnitData = ref<Role.Permission[]>([])
-  return { rolePopupVisible, permissionUnitVisible, rolePopupTitle, permissionUnitTitle, rolePopupData, permissionUnitData }
-}
-
-const dictStore = useDictStore()
-let openType = ''
+import RoleResourcePopup from './components/roleResourcePopup.vue'
+import { onMounted, reactive, ref } from 'vue'
+import {useDictStore} from '@/stores/modules/dict'
 const rolePopup = ref()
-
+const roleResourcePopup = ref()
+const dictStore = useDictStore()
 // ProTable 实例
 const proTable = ref<ProTableInstance>()
-
+const functionList = ref<Function.ResFunction[]>([])
 // 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
 // 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getUserList"
 const getTableList = (params: any) => {
@@ -69,6 +55,14 @@ const getTableList = (params: any) => {
   return getRoleList(newParams)
 }
 
+
+  // 初始化时获取角色列表
+  onMounted(async () => {
+    const response = await getFunctionList()
+    functionList.value = response.data as unknown as Function.ResFunction[]
+    //console.log(functionList.value)
+  })
+
 // 表格配置项
 const columns = reactive<ColumnProps<Role.RoleBO>[]>([
   { type: 'selection', fixed: 'left', width: 70 },
@@ -94,14 +88,21 @@ const columns = reactive<ColumnProps<Role.RoleBO>[]>([
     prop: 'state',
     label: '状态',
     minWidth: 100,
+    enum: dictStore.getDictData('state'),
+      fieldNames: { label: 'label', value: 'code' },
+      render: scope => {
+        return (
+          <el-tag type={scope.row.state ? 'success' : 'danger'} > {scope.row.state ? '正常' : '删除'} </el-tag>
+        )
+      },
   },
-  { prop: 'operation', label: '操作', fixed: 'right', width: 330 },
+  { prop: 'operation', label: '操作', fixed: 'right', width: 250 },
 ])
 
 // 删除角色信息
 const deleteAccount = async (params: Role.RoleBO) => {
   if (params.id) {
-  await useHandleData(deleteRole, { id:[params.id] }, '删除所选角色信息')
+  await useHandleData(deleteRole, [params.id], '删除所选角色信息')
   proTable.value?.clearSelection()
   proTable.value?.getTableList()
   }
@@ -109,7 +110,7 @@ const deleteAccount = async (params: Role.RoleBO) => {
 
 // 批量删除角色信息
 const batchDelete = async (id: string[]) => {
-  await useHandleData(deleteRole, { id }, '删除所选角色信息')
+  await useHandleData(deleteRole, id , '删除所选角色信息')
   proTable.value?.clearSelection()
   proTable.value?.getTableList()
 }
@@ -117,7 +118,11 @@ const batchDelete = async (id: string[]) => {
 
 // 打开 drawer(新增、查看、编辑)
 const openDrawer = (titleType: string, row: Partial<Role.RoleBO> = {}) => {
-  rolePopup.value?.open(titleType, row)
+    if(titleType==='设置权限'){
+      roleResourcePopup.value?.open(titleType, row,functionList.value)
+     }else{
+       rolePopup.value?.open(titleType, row)
+     }
 }
 </script>