用户管理里面添加过鱼设施权限管理功能

frontend/src/views/system/user/index.vue

@@ -5,7 +5,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { ref, onMounted, nextTick } from "vue";
+import { ref, onMounted, nextTick, watch } from "vue";
 import {
   getTreelist,
   gettableData,
@@ -20,6 +20,7 @@ import {
 import { ElMessageBox, ElMessage } from "element-plus";
 import { useAppStore } from '@/store/modules/app';
 import Page from '@/components/Pagination/page.vue'
+import { Search } from '@element-plus/icons-vue'
 // import { constant } from "lodash";
 //左侧树形控件
 interface Tree {
@@ -40,6 +41,7 @@ const total = ref()
 const treedata: any = ref([]);
 const dialog = ref(false)
 const treeRef = ref();
+const fishTreeRef = ref();
 const infoForm = ref();
 //获取企业树形信息
 const treeloading = ref(true)
@@ -56,7 +58,7 @@ function getTree() {
     });
     getdata()
   })
-  .catch((error:any)=>{
+    .catch((error: any) => {
       treeloading.value = false
     })
 
@@ -266,6 +268,370 @@ function setpassword(row: any) {
     })
   userid.value = row.id
 }
+
+//过去设施权限维护
+const fishway = ref(false)
+const userId = ref('')
+// 回显的权限ID数组
+const fishhui = ref<any[]>([])
+const fishTreeDialog = ref(false)
+function openFishway(row: any) {
+  fishway.value = true
+  userId.value = row.id
+  // 临时模拟数据
+  getFishTree()
+  // 打开对话框，watch 会处理回显逻辑  
+
+}
+
+// 监听fishway对话框打开,延迟回显
+watch(fishway, (newVal) => {
+  if (newVal) {
+    // dialog打开后,延迟回显确保tree组件完全渲染
+    setTimeout(() => {
+      console.log('开始回显, fishTreeRef:', fishTreeRef.value);
+      console.log('回显ID:', fishhui.value);
+
+      if (fishTreeRef.value && fishhui.value.length > 0) {
+        // 清除所有选中状态
+        fishTreeRef.value.setCheckedKeys([], false);
+
+        // 延迟一点再设置,确保清除生效
+        setTimeout(() => {
+          fishTreeRef.value.setCheckedKeys(fishhui.value, false);
+
+          // 验证回显结果
+          const checkedKeys = fishTreeRef.value.getCheckedKeys();
+          const halfCheckedKeys = fishTreeRef.value.getHalfCheckedKeys();
+          console.log('回显完成 - 全选节点:', checkedKeys);
+          console.log('回显完成 - 半选节点:', halfCheckedKeys);
+        }, 100);
+      }
+    }, 500);
+  } else {
+    // 关闭时清空回显数据
+    console.log('关闭对话框，清理数据');
+    fishhui.value = [];
+    // 清除tree选中状态
+    setTimeout(() => {
+      if (fishTreeRef.value) {
+        fishTreeRef.value.setCheckedKeys([], false);
+      }
+    }, 300);
+  }
+});
+
+function fishHandleClose() {
+  fishway.value = false
+}
+
+//过鱼设施type分类
+const activeName = ref('1')
+// 控制标签页禁用的状态（根据你的业务需求设置）
+const isBaseDisabled = ref(false)  // 基地标签是否禁用
+const isCompanyDisabled = ref(false)  // 公司标签是否禁用
+
+const handleClick = (tab: any, event: any) => {
+  // tab.props.name
+  console.log(tab.props.name, event)
+  activeName.value = tab.props.name
+  treeInput.value = ''
+  getFishTree()
+}
+//获取过鱼设施权限
+const treeInput = ref('')
+const fishProps = {
+  children: 'children',
+  label: 'label',
+}
+const fishData: Tree[] = [
+  {
+    id: 1,
+    label: 'Level one 1',
+    children: [
+      {
+        id: 4,
+        label: 'Level two 1-1',
+        children: [
+          {
+            id: 9,
+            label: 'Level three 1-1-1',
+          },
+          {
+            id: 10,
+            label: 'Level three 1-1-2',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: 2,
+    label: 'Level one 2',
+    children: [
+      {
+        id: 5,
+        label: 'Level two 2-1',
+      },
+      {
+        id: 6,
+        label: 'Level two 2-2',
+      },
+    ],
+  },
+  {
+    id: 3,
+    label: 'Level one 3',
+    children: [
+      {
+        id: 7,
+        label: 'Level two 3-1',
+      },
+      {
+        id: 8,
+        label: 'Level two 3-2',
+      },
+    ],
+  },
+]
+//获取左侧树的数据
+function getFishTree() {
+  fishTreeDialog.value = true
+  const params = {
+    type: activeName.value,
+    name: treeInput.value
+  }
+  fishTreeDialog.value = false
+  // fishhui.value = [1, 5];
+  if (fishhui.value.length > 0 && activeName.value == '1') {
+    isCompanyDisabled.value = true
+  } else if (fishhui.value.length > 0 && activeName.value == '2') {
+    isBaseDisabled.value = true
+  } else {
+    isCompanyDisabled.value = false
+    isBaseDisabled.value = false
+  }
+  // console.log('设置回显ID:', fishhui.value);
+  console.log(params)
+  // getFishTreeData().then((res) => {
+  //   fishData.value = res.data.data
+  // })
+}
+
+// 过鱼设施权限维护 - 获取所有子节点ID的辅助函数
+function getAllChildrenIds(node: any): number[] {
+  const ids: number[] = [];
+  if (node.children && node.children.length > 0) {
+    node.children.forEach((child: any) => {
+      ids.push(child.id);
+      if (child.children && child.children.length > 0) {
+        ids.push(...getAllChildrenIds(child));
+      }
+    });
+  }
+  return ids;
+}
+
+// 过鱼设施权限维护 - 检查父节点下所有子节点是否都被选中
+function areAllChildrenChecked(parentNode: any, checkedKeysArray: any[]): boolean {
+  const allChildrenIds = getAllChildrenIds(parentNode);
+  if (allChildrenIds.length === 0) {
+    return false;
+  }
+  // 检查所有子节点ID是否都在已选中的keys中
+  return allChildrenIds.every(id => checkedKeysArray.includes(id));
+}
+
+// 过鱼设施权限维护 - 检查节点是否被其他父节点包含
+function isNodeContainedByOtherParent(nodeId: number, parentIds: number[], allCheckedNodes: any[]): boolean {
+  // 遍历所有被标记为"全选"的父节点
+  for (const parentId of parentIds) {
+    const parentNode = allCheckedNodes.find((n: any) => n.id === parentId);
+    if (parentNode) {
+      const childrenIds = getAllChildrenIds(parentNode);
+      // 如果当前节点是某个父节点的子节点,则返回true
+      if (childrenIds.includes(nodeId)) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+
+// 过鱼设施权限维护 - 处理复选框选中事件
+function handleFishCheckChange(checkedNode: any, checkedInfo: any) {
+  console.log('当前操作的节点:', checkedNode);
+  console.log('选中的info:', checkedInfo);
+
+  const treeInstance = treeRef.value;
+  if (!treeInstance) return;
+
+  // 从 checkedInfo 中获取选中的keys数组
+  const checkedKeysArray = checkedInfo.checkedKeys || [];
+  const allCheckedNodes = checkedInfo.checkedNodes || [];
+
+  console.log('选中的keys数组:', checkedKeysArray);
+  console.log('选中的节点数组:', allCheckedNodes);
+
+  // 最终结果ID数组
+  const resultIds: number[] = [];
+
+  // 第一阶段:找出所有"子节点全部被选中"的父节点
+  const fullySelectedParentIds: number[] = [];
+  const filteredNodeIds = new Set<number>();
+
+  allCheckedNodes.forEach((node: any) => {
+
+    // 如果该节点有子节点(是父节点)
+    if (node.children && node.children.length > 0) {
+      // 检查该节点下的所有子节点是否都被选中
+      if (areAllChildrenChecked(node, checkedKeysArray)) {
+        // 记录这个父节点
+        fullySelectedParentIds.push(node.id);
+
+        // 标记所有子节点为"应过滤"
+        const childrenIds = getAllChildrenIds(node);
+        childrenIds.forEach(childId => {
+          filteredNodeIds.add(childId);
+        });
+      }
+    }
+  });
+
+  console.log('全选父节点IDs:', fullySelectedParentIds);
+  console.log('应过滤的子节点IDs:', Array.from(filteredNodeIds));
+
+  // 第二阶段:添加结果
+  // 1. 先添加所有"全选"的父节点(但要排除被其他父节点包含的)
+  fullySelectedParentIds.forEach(parentId => {
+    // 检查该父节点是否被其他父节点包含
+    if (!isNodeContainedByOtherParent(parentId, fullySelectedParentIds, allCheckedNodes)) {
+      resultIds.push(parentId);
+    }
+  });
+
+  // 2. 添加未被过滤的独立节点(叶子节点或未全选的父节点)
+  allCheckedNodes.forEach((node: any) => {
+    // 如果该节点没有被标记为过滤,且不在resultIds中
+    if (!filteredNodeIds.has(node.id) && !resultIds.includes(node.id)) {
+      // 再次检查:如果该节点是某个全选父节点的子节点,也要过滤
+      if (!isNodeContainedByOtherParent(node.id, fullySelectedParentIds, allCheckedNodes)) {
+        resultIds.push(node.id);
+      }
+    }
+  });
+
+  console.log('最终获取的IDs:', resultIds);
+
+  if (resultIds.length > 0 && activeName.value == '1') {
+    isCompanyDisabled.value = true
+  } else if (resultIds.length > 0 && activeName.value == '2') {
+    isBaseDisabled.value = true
+  } else {
+    isCompanyDisabled.value = false
+    isBaseDisabled.value = false
+  }
+  // 这里可以根据业务需求使用resultIds,比如调用接口保存权限
+  // saveFishPermissions(resultIds);
+  getFishTableData(resultIds)
+  tableids.value = resultIds
+}
+//过鱼设施权限
+const fishTableData = ref([
+  {
+    name: '过鱼设施权限1',
+    type: '站点',
+    id: 'fish_along_point1',
+    radio: '1'
+  },
+  {
+    name: '过鱼设施权限2',
+    type: '站点',
+    id: 'fish_along_point2',
+    radio: '2'
+  }, {
+    name: '过鱼设施权限3',
+    type: '站点',
+    id: 'fish_along_point3',
+    radio: '1'
+  },
+
+])
+const fishDialog = ref(false)
+const fishTableSelection = ref([])
+//获取过鱼设施权限数据
+function getFishTableData(ids: any[]) {
+  fishDialog.value = true
+  fishDialog.value = false;
+  // 获取过鱼设施权限数据
+  // getFishPermissions().then((res: any) => {
+  //   fishTableData.value = res.data
+  // })
+}
+//权限给予
+const tableids:any = ref([])
+function handleRadioChange(data: any){
+console.log('当前操作的行数据:', data);
+ElMessageBox.confirm(`确定要更改此权限为${data.radio == 1 ? '读' : '写'}吗？`, "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+     
+
+      ElMessage({
+        type: "success",
+        message: "更改成功",
+      });
+    })
+    .catch(() => {
+      getFishTableData(tableids.value)
+    });
+}
+//选中的过鱼权限
+function fishDataHandleSelectionChange(val: any) {
+  console.log('选中的行数据:', val);
+  fishTableSelection.value = val
+}
+//移除权限
+function delFishTable() {
+  ElMessageBox.confirm("确定移除选中权限吗？", "删除提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      // 获取选中的ID数组
+      const selectedIds = fishTableSelection.value.map((item: any) => item.id);
+
+      // 过滤fishTableData，删除与选中ID一致的项
+      fishTableData.value = fishTableData.value.filter((item: any) => {
+        return !selectedIds.includes(item.id);
+      });
+
+      ElMessage({
+        type: "success",
+        message: "删除成功",
+      });
+
+      // 清空选中状态
+      fishTableSelection.value = [];
+    })
+    .catch(() => {
+      // 用户取消删除
+    });
+}
+//权限确定
+function fishSure() {
+  // 获取fishTableData中的所有ID
+  const ids = fishTableData.value.map((item: any) => item.id);
+  // userId.value //用户id
+  console.log('fishTableData中的所有ID:', ids);
+
+  // 这里可以根据业务需求使用ids数组，比如调用接口保存权限
+  // saveFishPermissions(ids);
+}
 //删除用户
 function delclick(row: any) {
   ElMessageBox.confirm("确定删除此用户吗？", "删除提示", {
@@ -370,8 +736,9 @@ const vMove = {
   <div class="faulttemplate-box">
     <aside id="silderLeft">
       <el-tree ref="treeRef" :class="useAppStore().size === 'default' ? 'silderLeft-large' : 'silderLeft-default'"
-        node-key="id" :data="treedata" :current-node-key="currentNodeKey" :highlight-current="true" :props="defaultProps" v-loading="treeloading"
+        node-key="id" :data="treedata" :current-node-key="currentNodeKey" :highlight-current="true"
-        @node-click="handleNodeClick" style="height: calc(100vh - 150px); overflow: auto">
+        :props="defaultProps" v-loading="treeloading" @node-click="handleNodeClick"
+        style="height: calc(100vh - 150px); overflow: auto">
       </el-tree>
       <div class="moveBtn" v-move>
         <div class="moveBtn-line"></div>
@@ -380,7 +747,8 @@ const vMove = {
     <section class="silderRight">
       <el-row>
         <el-col :span="24">
-          <div style="margin-bottom:10px;display: flex;display: -webkit-flex; justify-content: space-between;-webkit-justify-content: space-between; width: 100%;">
+          <div
+            style="margin-bottom:10px;display: flex;display: -webkit-flex; justify-content: space-between;-webkit-justify-content: space-between; width: 100%;">
             <div>
               <el-input v-model="queryParams.querystr" placeholder="请输入用户姓名" clearable style="width: 200px"
                 @keyup.enter="getdata" />
@@ -406,7 +774,7 @@ const vMove = {
         <el-table-column type="index" label="序号" width="70" align="center" />
         <el-table-column prop="nickname" label="用户姓名" width="100"></el-table-column>
         <!-- <el-table-column prop="avatar" label="头像"></el-table-column> -->
-        <el-table-column prop="email" label="邮箱" ></el-table-column>
+        <el-table-column prop="email" label="邮箱"></el-table-column>
         <el-table-column prop="phone" label="手机号" min-width="90"></el-table-column>
         <el-table-column prop="username" label="登录账号" width="120"></el-table-column>
         <!-- <el-table-column prop="custom1" label="登录账号"></el-table-column> -->
@@ -417,7 +785,7 @@ const vMove = {
         </el-table-column>
         <el-table-column prop="status" label="账号状态" align="center" width="120">
           <template #default="scope">
-            <el-switch v-model="scope.row.status" active-value="1" inactive-value="0" @change="switchChange(scope.row)"
+            <el-switch v-model="scope.row.status" :active-value="1" inactive-value="0" @change="switchChange(scope.row)"
               style="margin-right: 4px;"></el-switch>
             <span v-if="scope.row.status == 1" style="color:#0099FF">启用</span>
             <span v-else style="color:#D7D7D7">停用</span>
@@ -431,9 +799,13 @@ const vMove = {
         </el-table-column>
         <el-table-column fixed="right" label="操作" width="110">
           <template #default="scope">
-            <span style="display: flex;display: -webkit-flex;justify-content: space-around;-webkit-justify-content: space-around; ">
+            <span
+              style="display: flex;display: -webkit-flex;justify-content: space-around;-webkit-justify-content: space-around; ">
               <img src="@/assets/MenuIcon/lbcz_xg.png" alt="" title="修改" @click="editdepartment(scope.row)"
                 style="cursor: pointer;">
+              <!-- frontend/src/assets/components/fish.png -->
+              <img src="@/assets/components/fish.png" alt="" title="过鱼设施权限维护" @click="openFishway(scope.row)"
+                style="cursor: pointer;">
               <img src="@/assets/MenuIcon/lbcz_czmm.png" alt="" title="重置密码" @click="setpassword(scope.row)"
                 style="cursor: pointer;">
               <img src="@/assets/MenuIcon/lbcz_sc.png" alt="" title="删除" @click="delclick(scope.row)"
@@ -442,7 +814,9 @@ const vMove = {
           </template>
         </el-table-column>
       </el-table>
-      <Page :total="total" v-model:size="queryParams.size" v-model:current="queryParams.current" @pagination="getdata()" ></Page>
+      <Page :total="total" v-model:size="queryParams.size" v-model:current="queryParams.current"
+        @pagination="getdata()">
+      </Page>
     </section>
     <!-- 用户 弹框-->
     <el-dialog v-model="dialogVisible" :close-on-click-modal="false" :before-close="handleClose" :title="title"
@@ -451,30 +825,117 @@ const vMove = {
         <el-form-item label="用户姓名" prop="nickname">
           <el-input v-model="info.nickname" style="width: 100%" placeholder="请输入用户姓名"></el-input>
         </el-form-item>
-        <el-form-item label="联系邮箱" >
+        <el-form-item label="联系邮箱">
           <el-input v-model="info.email" style="width: 100%" placeholder="请输入联系邮箱"></el-input>
         </el-form-item>
-        <el-form-item label="联系电话" >
+        <el-form-item label="联系电话">
           <el-input v-model="info.phone" style="width: 100%" placeholder="请输入联系电话"></el-input>
         </el-form-item>
         <el-form-item label="登录账号" prop="username">
           <el-input v-model="info.username" style="width: 100%" placeholder="请输入登录账号"></el-input>
         </el-form-item>
-        <el-form-item label="所属角色" >
+        <el-form-item label="所属角色">
           <el-select v-model="info.roleinfo" placeholder=" " style="width: 100%" multiple>
             <el-option v-for="item in rolesdata" :key="item.id" :label="item.rolename" :value="item.id" />
           </el-select>
         </el-form-item>
       </el-form>
-      <span class="dialog-footer" style="display: flex;display: -webkit-flex; justify-content: flex-end;-webkit-justify-content: flex-end;">
+      <span class="dialog-footer"
+        style="display: flex;display: -webkit-flex; justify-content: flex-end;-webkit-justify-content: flex-end;">
         <el-button @click="handleClose">取 消</el-button>
         <el-button type="primary" @click="confirmClick(infoForm)">保存</el-button>
       </span>
     </el-dialog>
+    <!-- 过鱼设施权限维护 -->
+    <el-dialog v-model="fishway" :close-on-click-modal="false" :before-close="fishHandleClose" title="过鱼设施权限维护"
+      append-to-body width="1600px" draggable>
+      <el-scrollbar height="628px">
+        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+          <el-tab-pane label="基地" name="1" :disabled="isBaseDisabled"></el-tab-pane>
+          <el-tab-pane label="公司" name="2" :disabled="isCompanyDisabled"></el-tab-pane>
+        </el-tabs>
+        <div class="fishBody">
+          <div class="fishTree">
+            <div style="width: 100%;padding: 0px 10px; box-sizing: border-box;">
+              <el-input v-model="treeInput" style="width: 100%" placeholder="请输入电站名称" clearable
+                class="input-with-select">
+                <template #append>
+                  <el-button :icon="Search" @click="getFishTree()" />
+                </template>
+              </el-input>
+            </div>
+
+            <el-scrollbar height="500px">
+              <el-tree ref="fishTreeRef" style="max-width: 300px" :data="fishData" show-checkbox default-expand-all
+                :v-loading="fishTreeDialog" node-key="id" highlight-current :props="fishProps"
+                @check="handleFishCheckChange" />
+            </el-scrollbar>
+          </div>
+          <div class="fishTable">
+            <div class="topTable">
+              <el-button type="danger" :disabled="fishTableSelection.length == 0" @click="delFishTable">移除权限</el-button>
+            </div>
+            <el-table :data="fishTableData" style="width: 100%;" row-key="id" border default-expand-all
+              :v-loading="fishDialog" @selection-change="fishDataHandleSelectionChange" max-height="500"
+              :header-cell-style="{ background: 'rgb(250 250 250)', color: ' #383838', height: '50px' }">
+              <el-table-column type="selection" width="50" align="center" />
+              <el-table-column type="index" label="序号" width="70" align="center" />
+              <el-table-column prop="name" label="名称"></el-table-column>
+              <el-table-column prop="type" label="类型"  width="200" align="center">
+                <template #default="scope">
+                  <span>{{ scope.row.type }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="id" label="权限" align="center"  width="200">
+                <template #default="scope">
+                   <el-radio-group v-model="scope.row.radio" @change="handleRadioChange(scope.row)">
+                      <el-radio value="1" size="large">读</el-radio>
+                      <el-radio value="2" size="large">写</el-radio>
+                    </el-radio-group>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </el-scrollbar>
+      <span class="dialog-footer"
+        style="display: flex;display: -webkit-flex; justify-content: flex-end;-webkit-justify-content: flex-end;margin-top: 20px;">
+        <el-button @click="fishHandleClose">取 消</el-button>
+        <el-button type="primary" @click="fishSure">保存</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
 <style scoped lang="scss">
+.fishBody {
+  height: 500px;
+  width: 100%;
+  display: flex;
+  // align-items: center;
+  justify-content: space-between;
+
+  .fishTree {
+    width: 300px;
+    height: 542px;
+    margin-right: 10px;
+    border-right: #409eff 1px solid;
+  }
+
+  .fishTable {
+    width: 100%;
+    height: 100%;
+
+    .topTable {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: end;
+      margin-bottom: 10px;
+    }
+  }
+}
+
 .silderLeft-default {
   :deep(.el-tree-node__label) {
     font-size: 16px !important;
@@ -542,6 +1003,21 @@ const vMove = {
   display: block;
 }
 
+.fishTree {
+  :deep(.el-tree-node.is-current>.el-tree-node__content) {
+    width: 100%;
+    height: 40px;
+    background-color: #ecf5ff !important;
+    // color: #fff !important;
+  }
+
+  :deep(.el-tree-node__content) {
+    width: 100% !important;
+    height: 40px !important;
+    margin: auto !important;
+  }
+}
+
 :deep(.el-tree-node.is-current>.el-tree-node__content) {
   width: 100%;
   height: 40px;
@@ -554,9 +1030,8 @@ const vMove = {
   height: 40px !important;
   margin: auto !important;
 }
-.el-message-box{
+
+.el-message-box {
   width: 300px !important;
 }
 </style>
-
-