按照标准框架修改角色界面

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

@@ -4,9 +4,9 @@ import type { ReqPage } from '@/api/interface'
 export namespace Role {
 
     export interface Permission{
-        id: string;             //权限名称
-        name: string;           //权限ID
-        havePermission:boolean; //是否拥有该权限
+        key: string;             //权限名称
+        label: string;           //权限ID
+        disabled:boolean; //是否拥有该权限
     }
 
     // 角色列表
@@ -39,9 +39,9 @@ export namespace Role {
   
     //角色权限列表
     export interface ResPermissionList {
-      id: string;
-      name: string;
-      permissionList?: Permission[];
+      key: string;
+      label: string;
+      disable?: Permission[];
     }
   
     // export interface ResRole {

frontend/src/api/role/roleData.ts

@@ -6,19 +6,19 @@ const data = [
       describe:"可以对待检设备的台账进行操作并执行检测功能",
       permissionList: [
         {
-          name: "台账管理",
-          id: "dataManager",
-          havePermission: false,
+          label: "台账管理",
+          key: "dataManager",
+          disable: false,
         },
         {
-          name: "系统配置",
-          id: "sysManager",
-          havePermission: false,
+          label: "系统配置",
+          key: "sysManager",
+          disable: false,
         },
         {
-          name: "设备检测",
-          id: "devTest",
-          havePermission: true,
+          label: "设备检测",
+          key: "devTest",
+          disable: true,
         },
       ]},
       {
@@ -28,19 +28,19 @@ const data = [
         describe:"可以设置检测脚本、误差体系、新增操作人员",
         permissionList: [
         {
-          name: "台账管理",
-          id: "dataManager",
-          havePermission: true,
+          label: "台账管理",
+          key: "dataManager",
+          disable: true,
         },
         {
-          name: "系统配置",
-          id: "sysManager",
-          havePermission: false,
+          label: "系统配置",
+          key: "sysManager",
+          disable: false,
         },
         {
-          name: "设备检测",
-          id: "devTest",
-          havePermission: true,
+          label: "设备检测",
+          key: "devTest",
+          disable: true,
         },
       ]},
       {
@@ -50,19 +50,19 @@ const data = [
         describe:"可以修改程序的底层配置，例如检测指标的具体类型",
         permissionList: [
         {
-          name: "台账管理",
-          id: "dataManager",
-          havePermission: true,
+          label: "台账管理",
+          key: "dataManager",
+          disable: true,
         },
         {
-          name: "系统配置",
-          id: "sysManager",
-          havePermission: true,
+          label: "系统配置",
+          key: "sysManager",
+          disable: true,
         },
         {
-          name: "设备检测",
-          id: "devTest",
-          havePermission: true,
+          label: "设备检测",
+          key: "devTest",
+          disable: true,
         },
       ]},
     ]

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

@@ -0,0 +1,31 @@
+<template>
+<!-- 权限信息弹出框 -->
+<el-dialog :model-value="dialogVisible" :title="title" @close="handleCancel" width="800" draggable>
+    <div>
+        <el-transfer v-model="value" :data="data" :titles="['未具备的权限', '已具备的权限']"/>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="handleCancel">取消</el-button>
+        <el-button type="primary" @click="handleCancel">
+          保存
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+
+  </template>
+  
+  <script lang="ts" setup>
+  import { ref } from 'vue'
+  const {dialogVisible,data} = defineProps(['dialogVisible','title','data'])
+  const value = ref()
+ 
+  const emit = defineEmits<{
+  (e:'update:visible',value:boolean):void;
+  }>();
+
+  const handleCancel = () => {
+    emit('update:visible',false)
+  }
+  </script>

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

@@ -0,0 +1,60 @@
+<template>
+    <!-- 基础信息弹出框 -->
+  <el-dialog :model-value="dialogVisible" :title="title" @close="handleCancel" width="800" 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" 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="handleCancel">
+          保存
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+
+  </template>
+  
+  <script lang="ts" setup>
+  import { ref } from 'vue'
+  
+  const value = ref(true)
+  const {dialogVisible,title,data}  = defineProps<{
+    dialogVisible:boolean;
+    title:string;
+    data:{
+      rolename:string;
+      id:string;
+      status:number;
+      describe:string;
+    }
+  }>();
+  const emit = defineEmits<{
+  (e:'update:visible',value:boolean):void;
+  }>();
+
+  const handleCancel = () => {
+    emit('update:visible',false)
+  }
+  
+  </script>

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

@@ -7,8 +7,8 @@
       >
         <!-- 表格 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='CirclePlus' @click="openDrawer('新增')">新增角色</el-button>
+          <el-button type='primary' :icon='Download' plain @click='downloadFile'>导出角色数据</el-button>
           <el-button type='danger' :icon='Delete' plain :disabled='!scope.isSelected'
                      @click='batchDelete(scope.selectedListIds)'>
             批量删除角色
@@ -16,44 +16,26 @@
         </template>
         <!-- 表格操作 -->
         <template #operation='scope'>
-          <el-button type='primary' link :icon='View' @click="openDrawer('编辑', scope.row)">编辑</el-button>
+          <el-button type='primary' link :icon='EditPen' @click="openDrawer('编辑', scope.row)">编辑</el-button>
           <el-button type='primary' link :icon='Delete' @click='deleteAccount(scope.row)'>删除</el-button>
-          <!-- <el-button type='primary' link :icon='EditPen' @click='resetPass(scope.row)'>设置权限</el-button> -->
+          <el-button type='primary' link :icon='Share' @click="openDrawer('设置权限', scope.row)">设置权限</el-button>
       </template>
   
       </ProTable>
     </div>
 
-      <!-- 弹出的对话框 -->
-  <el-dialog v-model="dialogVisible" :title="dialogType ==='add' ? '新增角色类型' : '修改角色类型'"  width="500" draggable>
-    <div>
-        <el-form :model="dialogForm">
-        <el-form-item label="角色类型名称" :label-width="100">
-          <el-input v-model="dialogForm.rolename" placeholder="请输入类型名称" autocomplete="off" />
-        </el-form-item>
-        <el-form-item label="角色类型编码" :label-width="100">
-          <el-input v-model="dialogForm.id" placeholder="请输入角色类型编码" autocomplete="off" />
-        </el-form-item>
-        <el-form-item label="角色类型状态" :label-width="100">
-          <el-input v-model="dialogForm.status" placeholder="请输入状态" autocomplete="off" />
-        </el-form-item>
-        <el-form-item label="角色类型备注" :label-width="100">
-          <el-input v-model="dialogForm.describe" placeholder="请输入备注" autocomplete="off" />
-        </el-form-item>
-        <!-- <el-form-item label="权限" :label-width="60">
-          <el-input v-model="drawerForm.rolePermission" placeholder="请输入地址" autocomplete="off" />
-        </el-form-item> -->
-      </el-form>
-      </div>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button @click="dialogVisible = false">取消</el-button>
-        <el-button type="primary" @click="dialogVisible = false">
-          保存
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
+   <roleUnit 
+   :dialogVisible = roleUnitVisible 
+   :title = roleUnitTitle 
+   :data = roleUnitData 
+   @update:visible="roleUnitVisible = $event"
+   />
+  <permissionUnit 
+  :dialogVisible = permissionUnitVisible 
+  :title = permissionUnitTitle 
+  :data = permissionUnitData
+  @update:visible="permissionUnitVisible = $event"
+  />
   </template>
   
   <script setup lang='tsx' name='useRole'>
@@ -62,35 +44,13 @@
   import { useDownload } from '@/hooks/useDownload'
   import { useAuthButtons } from '@/hooks/useAuthButtons'
   import ProTable from '@/components/ProTable/index.vue'
+  import roleUnit from './components/roleUnit.vue'
+  import permissionUnit from './components/permissionUnit.vue'
   import ImportExcel from '@/components/ImportExcel/index.vue'
   import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
-  import { CirclePlus, Delete, EditPen, Download, Upload, View, Refresh } from '@element-plus/icons-vue'
+  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'
-  
-  const {dialogVisible,dialogType,dialogForm} = useCount();
-  function useCount() {
-    const dialogVisible = ref(false)
-    const dialogType = ref('新增')
-    
-    const dialogForm = ref({
-      rolename:"",
-      id: "",
-      status: 0,
-      describe:"",
-    })
-    //const dialogForm = ref<Role.ReqRoleParams>({
-    //   rolename:"",
-    //   id: "",
-    //   status: 0,
-    //   describe:"",
-    // })
-
-    return {dialogVisible,dialogType,dialogForm};
-  }
-
-  const dictStore = useDictStore()
-  
   import {
     getRoleList,
     addRole,
@@ -100,13 +60,21 @@
     changeRoleStatus,
     exportRoleInfo,
     getRoleDepartment,
-    // deleteUser,
-    // changeUserStatus,
-    // exportUserInfo,
-    // BatchAddUser,
     getRoleStatus,
   } from '@/api/role/role'
-import { describe } from 'node:test'
+
+  const {roleUnitVisible,permissionUnitVisible,roleUnitTitle,permissionUnitTitle,roleUnitData,permissionUnitData} = useCount();
+  function useCount() {
+    const roleUnitVisible = ref(false)
+    const permissionUnitVisible = ref(false)
+    const roleUnitTitle = ref()
+    const permissionUnitTitle = ref()
+    const roleUnitData = ref<Role.ResRoleList>({} as Role.ResRoleList)
+    const permissionUnitData = ref<Role.Permission[]>([])
+    return {roleUnitVisible,permissionUnitVisible,roleUnitTitle,permissionUnitTitle,roleUnitData,permissionUnitData};
+  }
+
+  const dictStore = useDictStore()
   
   const roleData = roleDataList
   
@@ -144,41 +112,33 @@ import { describe } from 'node:test'
     { type: 'index', fixed: 'left', width: 70, label: '序号' },
     {
       prop: 'rolename',
-      label: '角色名称',
+      label: '名称',
       search: { el: 'input' },
+      minWidth: 150,
     },
     {
       prop: 'id',
-      label: '角色编码',
+      label: '编码',
       search: { el: 'input' },
+      minWidth: 180,
     },
     {
       prop: 'status',
-      label: '角色状态',
+      label: '状态',
       enum: dictStore.getDictData('status'),
       search: { el: 'tree-select', props: { filterable: true } },
-      fieldNames: { label: 'roleLabel', value: 'roleStatus' },
+      minWidth: 100,
+      fieldNames: { label: 'label', value: 'code' },
       render: scope => {
         return (
-          <>
-            {BUTTONS.value.status ? (
-              <el-switch
-                model-value={scope.row.status}
-                active-text={scope.row.status ? '启用' : '禁用'}
-                active-value={1}
-                inactive-value={0}
-                onClick={() => changeStatus(scope.row)}
-              />
-            ) : (
            <el-tag type={scope.row.status ? 'success' : 'danger'}>{scope.row.status ? '启用' : '禁用'}</el-tag>
-            )}
-          </>
         )
       },
     },
     {
       prop: 'describe',
-      label: '角色描述',
+      label: '描述',
+      minWidth: 380,
     },
     { prop: 'operation', label: '操作', fixed: 'right', width: 330 },
   ])
@@ -196,11 +156,6 @@ import { describe } from 'node:test'
     proTable.value?.getTableList()
   }
   
-  // 重置用户密码
-  // const resetPass = async (params: User.ResUserList) => {
-  //   await useHandleData(resetUserPassWord, { id: params.id }, `重置【${params.username}】用户密码`)
-  //   proTable.value?.getTableList()
-  // }
  
   // 切换角色状态
   const changeStatus = async (row: Role.ResRoleList) => {
@@ -232,11 +187,33 @@ import { describe } from 'node:test'
   
   // 打开 drawer(新增、查看、编辑)
   const openDrawer = (title: string, row: Partial<Role.ResRoleList> = {}) => {
-    dialogVisible.value = true
-    dialogType.value = title
-    // dialogForm = row
-  }
     
+    if(title === "新增" || title === '编辑' )
+    {
+      roleUnitVisible.value = true
+      roleUnitTitle.value = title
+    
+      const safeRow: Role.ResRoleList = {
+        id: row.id || '',
+        rolename: row.rolename || '',
+        status: row.status || 0,
+        describe: row.describe || '',
+        permissionList: row.permissionList || []
+      };
+
+      roleUnitData.value = safeRow;
+    }
+    else if(title === "设置权限")
+    {
+      permissionUnitVisible.value = true
+      permissionUnitTitle.value = title
+
+      if (row.permissionList) 
+      {
+        permissionUnitData.value = row.permissionList;
+      }
+    }
+  }
 
   </script>