新增角色页面地区，权限列表单选，角色重复提示

src/views/permissions/permission.vue

@@ -4,10 +4,11 @@ import ElementPlus from 'element-plus'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import axios from 'axios'
 import moment from 'moment'
-import {InfoFilled, UserFilled} from '@element-plus/icons-vue'
+import { InfoFilled, UserFilled } from '@element-plus/icons-vue'
 import _ from 'lodash'
 import request from '@/util/http'
 import API from '@/util/http'
+import {  } from 'vue';
 // 客户明细表格   什么表格？？？？？？？
 const tableData = ref([])
 const roleData = ref([])
@@ -44,8 +45,6 @@ const market = ref([])
 const postiton = ref([])
 // 新增用户对象
 const userAddObj = ref({})
-// 新增角色对象
-const permissionAddObj = ref({})
 // 新增角色弹窗
 const permissionAddVisible = ref(false)
 // 新增用户权限对象，机器码要实现存储多个，addMachineIdInput方法实现
@@ -67,6 +66,7 @@ const addRole = ref({
   grade: '',
   market: ''
 })
+const addRoleMarket = ref([])
 // 新增角色的权限列表
 const permissionSelect = ref()
 //这是获取用户信息的接口
@@ -273,7 +273,13 @@ const userAddInit = function () {
 }
 // 新增角色初始化
 const permissionAddInit = function () {
-  permissionAddObj.value = {}
+  const addRole = ref({
+    roleName: '',
+    parentId: null,
+    checkedKeys: [],
+    grade: '',
+    market: ''
+  })
   openPermissionAddVisible()
 }
 //新增用户
@@ -600,8 +606,13 @@ const handleAddRole = async function () {
         "market": addRole.value.market
       }
     })
-    console.log('成功了，看看addRole', addRole.value)
-    closePermissionAddVisible()
+    if (res.code == 200) {
+      ElMessage.success('角色' + addRole.value.roleName + '添加成功')
+      console.log('成功了，看看addRole', addRole.value)
+      closePermissionAddVisible()
+    } else {
+      ElMessage.error(res.msg)
+    }
   } catch (error) {
     console.log('请求失败', error)
     console.log('失败，看看addRole', addRole.value);
@@ -670,6 +681,37 @@ const getLists = async function () {
     }
     console.log('看看data', data.value)
     console.log('parentID:', addRole.value.parentId, 'roleId:', roleId)
+    if (addRole.value.parentId) {
+      const result = await API({
+        url: '/general/roleMarket',
+        data: { id: addRole.value.parentId }
+      })
+      if (result.code == 200) {
+        if (typeof result.data === 'string' && result.data) {
+          addRoleMarket.value = result.data.split(',');
+        } else if (Array.isArray(result.data)) {
+          addRoleMarket.value = result.data
+        }
+        else {
+          addRoleMarket.value = [];
+        }
+      } else {
+        ElMessage.error('该上级角色无所属地区')
+        console.log('该上级角色无所属地区');
+
+      }
+      console.log('addRoleMarket.value', addRoleMarket.value);
+    } else {
+      if (typeof adminData.value.markets === 'string' && adminData.value.markets) {
+        addRoleMarket.value = adminData.value.markets.split(',');
+      } else if (Array.isArray(adminData.value.markets)) {
+        addRoleMarket.value = adminData.value.markets
+      }
+      else {
+        addRoleMarket.value = [];
+      }
+    }
+
   } catch (error) {
     console.log('请求失败', error)
   }
@@ -684,7 +726,7 @@ const handleMarketChange = (values) => {
     // 如果选择了总部，只保留总部
     addAdmin.value.market = ['总部'];
   }
-  console.log('看看现在的地区',addAdmin.value.market);
+  console.log('看看现在的地区', addAdmin.value.market);
 
 };
 const includeHq = computed(() => {
@@ -702,13 +744,59 @@ const EdithandleMarketChange = (values) => {
     // 如果选择了总部，只保留总部
     permissionEditObj.value.market = ['总部'];
   }
-  console.log('看看现在的地区',permissionEditObj.value.market);
+  console.log('看看现在的地区', permissionEditObj.value.market);
 
 };
-const handleCheckChange = (checkedNodes, { checkedKeys }) => {
-  addRole.value.checkedKeys = checkedKeys;
-}
+const handleCheckChange = async (checkedNodes, checkedInfo) => {
+  const { checkedKeys, checkedNodes: allCheckedNodes } = checkedInfo;
+
+  // 判断是否有选中的节点（避免空数组报错）
+  if (allCheckedNodes.length === 0) return;
+  // 取第一个选中的节点
+  const node = allCheckedNodes[0];
+  // 选中状态
+  const checked = checkedKeys.includes(node.id);
+
+  console.log('checkedInfo', checkedInfo);
+  console.log('node', node);
+  console.log('checked', checked);
+
+  if (checked) {
+    const newCheckedKeys = [...checkedInfo.checkedKeys];
+    console.log('初始选中项:', newCheckedKeys);
+    // 执行递归前先清空可能的重复父级（可选优化）
+    const uniqueKeys = [...new Set(newCheckedKeys)];
+
+    selectParentNodes(data.value, node.id, uniqueKeys);
+    console.log('包含父级的选中项:', uniqueKeys);
+    addRole.value.checkedKeys = uniqueKeys;
+  } else {
+    addRole.value.checkedKeys = checkedInfo.checkedKeys;
+    console.log('else');
 
+  }
+};
+
+const selectParentNodes = (treeData, nodeId, checkedKeys) => {
+  if (!Array.isArray(treeData)) return false;
+
+  for (const item of treeData) {
+    if (item.children && Array.isArray(item.children) && item.children.length > 0) {
+      const found = selectParentNodes(item.children, nodeId, checkedKeys);
+      if (found) {
+        // 避免重复添加父级
+        if (!checkedKeys.includes(item.id)) {
+          checkedKeys.push(item.id);
+        }
+        return true;
+      }
+    }
+    if (item.id === nodeId) {
+      return true;
+    }
+  }
+  return false;
+};
 //点击角色权限菜单树点击展示逻辑
 const menuTreeVisible = ref(false);
 const currentRoleMenuTree = ref([]);
@@ -742,7 +830,7 @@ const confirmResetPassword = async function () {
   // 处理markets数据
   if (typeof adminData.value.markets === 'string' && adminData.value.markets) {
     adminData.value.markets = adminData.value.markets.split(',');
-  }else if(Array.isArray(adminData.value.markets)){
+  } else if (Array.isArray(adminData.value.markets)) {
     // 不处理
   }
   else {
@@ -755,7 +843,7 @@ const confirmResetPassword = async function () {
   // 权限检查
   if (adminData.value.markets.includes(currentRow.value.market) || adminData.value.markets[0] === '总部') {
 
-    console.log('符合条件，可以操作',adminData.value.markets.includes(currentRow.value.market) || adminData.value.markets[0] === '总部');
+    console.log('符合条件，可以操作', adminData.value.markets.includes(currentRow.value.market) || adminData.value.markets[0] === '总部');
     const params = {
       account: currentRow.value.account,
     }
@@ -790,54 +878,6 @@ const confirmResetPassword = async function () {
 const cancelResetPassword = function () {
   resetConfirmVisible.value = false
 }
-
-/*//用户密码重置
-const resetPassword = function (row) {
-  console.log('adminData.value.markets', adminData.value.markets);
-  
-  // 处理markets数据
-  if (typeof adminData.value.markets === 'string' && adminData.value.markets) {
-    adminData.value.markets = adminData.value.markets.split(',');
-  } else {
-    adminData.value.markets = [];
-  }
-  
-  if (adminData.value.markets.includes(row.market)||adminData.value.markets=='总部') {
-    console.log('符合条件，可以操作');
-     // 用then处理确认，catch处理取消和错误
-  ElMessageBox.confirm(
-    `确认重置该账号密码？`,
-    '提示',
-    {
-      confirmButtonText: '确认',
-      cancelButtonText: '取消',
-      type: "warning",
-      lockScroll: false
-    }
-  ).then(async () => {
-    // 仅当用户确认时执行
-    try {
-      const res = await API({
-        url: '/admin/reset',
-        data: { account: row.account }
-      });
-      if (res.code === 200) {
-        ElMessage.success(res.data);
-      }
-    } catch (error) {
-      ElMessage.error('请求失败: ' + (error.message || error));
-    }
-  }).catch(() => {
-    // 取消操作，可选择性添加日志
-    console.log('用户取消了重置密码操作');
-  });
-  }else{
-    ElMessage.error('您没有修改'+row.market+'地区的用户密码的权限')
-  }
-  
- 
-}*/
-
 const Rolerules = reactive({
   roleName: [
     { required: true, message: '请输入角色名称', trigger: 'blur' },
@@ -849,6 +889,20 @@ const Rolerules = reactive({
   grade: [
     { required: true, message: '请输入优先级', trigger: 'blur' },
     { pattern: /^[1-9]\d{0,2}$/, message: '优先级应为1-999的数字', trigger: 'blur' }
+  ],
+  checkedKeys: [
+    {
+      required: true,
+      message: '请选择权限列表',
+      trigger: 'change', // 选框变化或提交时触发，可根据实际调整
+      validator: (rule, value, callback) => {
+        if (value && value.length > 0) {
+          callback(); // 有选中项，校验通过
+        } else {
+          callback(new Error('请选择权限列表')); // 未选中，抛出错误提示
+        }
+      }
+    }
   ]
 });
 // 挂载
@@ -1119,7 +1173,8 @@ onMounted(async function () {
         <el-input v-model="permissionEditObj.adminName" placeholder="请输入用户名" style="width: 220px" disabled />
       </el-form-item>
       <el-form-item prop="market" label="所属地区:" clearable>
-        <el-select multiple v-model="permissionEditObj.market" placeholder="请选择所属地区" style="width: 440px" clearable @change="EdithandleMarketChange">
+        <el-select multiple v-model="permissionEditObj.market" placeholder="请选择所属地区" style="width: 440px" clearable
+          @change="EdithandleMarketChange">
           <el-option v-for="item in market" :key="item" :label="item" :value="item" :disabled="EditincludeHq(item)" />
         </el-select>
       </el-form-item>
@@ -1178,7 +1233,7 @@ onMounted(async function () {
         </el-form-item>
         <el-form-item prop="market" label="所属地区:" required>
           <el-select v-model="addRole.market" placeholder="请选择所属地区" style="width: 240px" clearable>
-            <el-option v-for="item in market" :key="item" :label="item" :value="item" />
+            <el-option v-for="item in addRoleMarket" :key="item" :label="item" :value="item" />
           </el-select>
         </el-form-item>
         <el-form-item prop="parentName" label="上级角色:">
@@ -1213,13 +1268,12 @@ onMounted(async function () {
     </template>
   </el-dialog>
   <!-- 重置密码确认弹窗 -->
-  <el-dialog
-      v-model="resetConfirmVisible" width="500px" :close-on-click-modal="false" :before-close="cancelResetPassword"
-  >
+  <el-dialog v-model="resetConfirmVisible" width="500px" :close-on-click-modal="false"
+    :before-close="cancelResetPassword">
     <el-row>
       <el-col :span="4" style="margin-top: 20px">
         <el-icon class="dialog-icon" color="#10AEFF" size="50">
-          <InfoFilled/>
+          <InfoFilled />
         </el-icon>
       </el-col>
       <el-col :span="20">