角色

src/api/safetyManagement/roleConfig.js

@@ -61,4 +61,13 @@ export function del(data) {
     method: 'post',
     data: data
   })
+}
+
+
+export function checkNameExit(data) {
+  return request({
+    url: '/console/role/checkNameExit',
+    method: 'post',
+    data: data
+  })
 }
\ No newline at end of file

src/views/safetyManagement/roleConfig/edit.vue

@@ -23,7 +23,7 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="角色名" prop="rolename">
-            <el-input v-model="form.rolename" placeholder="请输入角色名" />
+            <el-input v-model="form.rolename" :disabled="!!form.id" placeholder="请输入角色名" @blur="changeCheckNameExit" />
           </el-form-item>
         </el-col>
       </el-row>
@@ -59,9 +59,10 @@
 <script setup>
 import { ref, reactive, computed, watch, nextTick, onMounted } from 'vue'
 import { queryAll as queryAllMenu } from '@/api/safetyManagement/menuConfig.js'
-import { initEdit, add, modify } from '@/api/safetyManagement/roleConfig.js'
+import { initEdit, add, modify, checkNameExit } from '@/api/safetyManagement/roleConfig.js'
 import { ArrowRight, ArrowDown } from '@element-plus/icons-vue'
 import PermissionArea from '@/components/PermissionArea/index.vue'
+import { id } from 'element-plus/es/locales.mjs'
 // 定义组件名称
 defineOptions({
   name: 'RoleEdit'
@@ -87,14 +88,9 @@ const formRef = ref(null)
 
 // 表单数据
 const form = reactive({
-  realname: '',
-  roleName: '',
-  password: '',
-  confirmPassword: '',
-  email: '',
-  userGroup: '',
-  remark: '',
-  isDisabled: false
+  id: null, 
+  rolename: '',
+  remark: ''
 })
 
 // 表单校验规则
@@ -191,18 +187,14 @@ watch(() => props.visible, async (val) => {
 const resetForm = () => {
   nextTick(() => {
     formRef.value?.resetFields()
+    form.id = null
     Object.assign(form, {
       id: null,
-      realname: '',
-      roleName: '',
-      password: '',
-      confirmPassword: '',
-      email: '',
-      userGroup: '',
-      remark: '',
-      isDisabled: false
+      rolename: '',
+      remark: ''
     })
-    
+
+    console.log('reset form', form)
   })
 }
 
@@ -247,13 +239,11 @@ const handleSubmit = () => {
   formRef.value.validate((valid) => {
     if (valid) {
       // 提交表单逻辑
-      const params = { ...form }
-      
-      // 如果是编辑模式且没有修改密码，则不提交密码字段
-      if (props.formData && props.formData.id && !params.password) {
-        delete params.password
-        delete params.confirmPassword
-      }
+      const params = { roles: {
+        rolename: form.rolename,
+        remark: form.remark,
+        id: form.id
+      } }
       
       // 收集选中的菜单权限
       const selectedMenuIds = []
@@ -269,60 +259,48 @@ const handleSubmit = () => {
       }
       
       collectSelectedMenus(permissionList.value)
-      params.menuList = selectedMenuIds.map(id => ({ id }))
-      
+      params.idList = selectedMenuIds
+
       console.log('submit form', params)
-      // 调用接口保存数据
-      emit('success')
+      if(form.id){
+        // 调用modify方法 
+        modify(params).then(res => {
+          if (res.code === 'POP_00014') {
+            console.log('角色添加成功', res);
+            emit('success');
+            handleClose();
+          } else {
+            console.error('角色添加失败:', res.msg);
+          }
+        }).catch(error => {
+          console.error('角色添加异常:', error);
+        });
+          
+      }else{
+        const res = checkNameExit({ rolename: form.rolename });
+        if (res.code !== 'POP_00014') {
+          console.error('角色名已存在:', res.msg);
+          return
+        }
+         // 调用add方法 
+        add(params).then(res => {
+          if (res.code === 'POP_00014') {
+            console.log('角色添加成功', res);
+            emit('success');
+            handleClose();
+          } else {
+            console.error('角色添加失败:', res.msg);
+          }
+        }).catch(error => {
+          console.error('角色添加异常:', error);
+        });
+      }
       handleClose()
     }
   })
 }
 
-const handleSelectAll = (val) => {
-  if (props.roles) {
-    props.roles.forEach(role => {
-      role.selected = val
-    })
-  }
-}
-
-const handleRoleSelect = (role, val) => {
-  role.selected = val
-  allSelected.value = props.roles?.every(role => role.selected) || false
-}
 
-const addSelected = () => {
-  const selected = props.roles?.filter(role => role.selected) || []
-  selectedRoles.value = [...new Set([...selectedRoles.value, ...selected])]
-  // 这里应该更新props.roles，但由于是props，需要通过emit事件通知父组件更新
-  allSelected.value = false
-}
-
-const removeSelected = () => {
-  // 这里应该将selectedRoles添加回props.roles，但由于是props，需要通过emit事件通知父组件更新
-  selectedRoles.value = []
-}
-
-const clearSelected = () => {
-  // 这里应该将selectedRoles添加回props.roles，但由于是props，需要通过emit事件通知父组件更新
-  selectedRoles.value = []
-}
-
-// 权限相关方法
-const handleAllPermissionsChange = (val) => {
-  // 处理全选
-  permissionList.value.forEach(item => {
-    item.selected = val
-    if (item.children) {
-      item.children.forEach(child => {
-        child.selected = val
-      })
-    }
-    item.indeterminate = false
-  })
-  allPermissionsSelected.value = val
-}
 
 const handlePermissionChange = (item, val) => {
   // 处理父级权限选择
@@ -362,16 +340,27 @@ const checkAllPermissionsStatus = () => {
   })
 }
 
-const toggleExpand = (item) => {
-  // 展开/收起子菜单
-  item.expanded = !item.expanded
-}
-
 // 组件挂载后初始化权限列表
 onMounted(() => {
   // 初始获取权限列表
   fetchPermissionList()
 })
+
+// 验证角色名是否存在
+const changeCheckNameExit = async () => {
+  if (form.rolename && !form.id) {
+    try {
+      const res = await checkNameExit({ rolename: form.rolename });
+      if (res.code !== 'POP_00014') {
+        console.error('角色名已存在:', res.msg);
+      } else {
+        console.log('角色名可用');
+      }
+    } catch (error) {
+      console.error('验证角色名异常:', error);
+    }
+  }
+};
 </script>
 
 <style lang="scss" scoped>

src/views/safetyManagement/roleConfig/index.vue

@@ -46,8 +46,8 @@
                   <span>删除</span>
                 </div>
                 <div class="operation-btn" @click="handleEdit(user)">
-                  <el-icon><Edit /></el-icon>
-                  <span>编辑</span>
+                  <el-icon><MessageBox /></el-icon>
+                  <span>权限设置</span>
                 </div>
               </div>
             </div>
@@ -83,9 +83,9 @@
 <script setup>
 import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
 import { ElMessageBox } from 'element-plus'
-import { User, Delete, Edit } from '@element-plus/icons-vue'
+import { User, Delete, MessageBox } from '@element-plus/icons-vue'
 import RoleEdit from './edit.vue'
-import { query as queryRole } from '@/api/safetyManagement/roleConfig.js'
+import { query as queryRole, del } from '@/api/safetyManagement/roleConfig.js'
 
 
 // 定义组件名称
@@ -157,6 +157,18 @@ const handleDelete = (row) => {
   }).then(() => {
     // 调用删除接口
     console.log('删除角色', row)
+    // 这里应该调用删除接口
+    del({ id: row.id }).then(res => {
+      if (res.code === 'POP_00014') {
+        console.log('角色删除成功', res);
+        getList();
+      } else {
+        console.error('角色删除失败:', res.msg);
+      }
+    }).catch(error => {
+      console.error('角色删除异常:', error);
+    }); 
+
   }).catch(() => {})
 }