feature: 用户组详情、人员模板支持查看操作人来源

frontend/src/common/util.js

@@ -557,22 +557,26 @@ export function formatCodeData (type, payload, isEmpty = true) {
 }
 
 /**
- * 递归查询匹配角色id
- *
- * @param {number} id
- * @param {Array} list
- */
-export function getTreeNode (id, list) {
-  for (let i = 0; i < list.length; i++) {
-    if (list[i].id === id) {
-      return list[i];
-    } else if (list[i].sub_roles && list[i].sub_roles.length) {
-      const result = getTreeNode(id, list[i].sub_roles);
-      if (result) {
-        return result;
-      }
+ * 查找tree匹配条件的字段
+ *
+ * @param {string} key  匹配的字段key
+ * @param {string} value 匹配的字段value
+ * @param {string} childKey 动态子集children字段
+ * @param {Array} list 源数组
+ */
+export function getTreeNode (list, key, value, childKey) {
+  const treeData = [...list];
+  let node = treeData.shift();
+  while (node) {
+    if (node[key] === value) {
+      return node;
+    }
+    if (node[childKey] && Array.isArray(node[childKey])) {
+      treeData.push(...node[childKey]);
     }
+    node = treeData.shift();
   }
+  return node;
 }
 
 /**

frontend/src/components/iam-limit-org-dialog/index.vue

@@ -61,8 +61,7 @@
   .confirm-content-wrapper {
     display: flex;
     align-items: center;
-    padding-top: 8px;
-    padding-bottom: 16px;
+    padding-bottom: 8px;
     word-break: break-all;
     .warn {
       font-size: 22px;

frontend/src/css/mixins/member-table.css

@@ -2,29 +2,21 @@
   .user-group-member-table {
     margin-top: 16px;
     border: none;
-    tr:hover {
-      .user,
-      .depart {
-        background: #fff;
-      }
-    }
     .user,
     .depart,
     .member-template {
       padding: 4px 6px;
       background: #f0f1f5;
-      width: max-content;
       border-radius: 2px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      max-width: max-content;
       i {
         font-size: 14px;
         color: #c4c6cc;
       }
       .name {
-        display: inline-block;
-        max-width: 350px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
         vertical-align: bottom;
       }
     }
@@ -39,5 +31,9 @@
         cursor: pointer;
       }
     }
+    /deep/ .bk-table-fixed,
+    /deep/ .bk-table-fixed-right {
+      border-bottom: 0;
+    }
   }
 }

frontend/src/directive/click-outside.js

@@ -0,0 +1,91 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * 蓝鲸智云-权限中心(BlueKing-IAM) available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * 蓝鲸智云-权限中心(BlueKing-IAM) is licensed under the MIT License.
+ *
+ * License for 蓝鲸智云-权限中心(BlueKing-IAM):
+ *
+ * ---------------------------------------------------
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+ * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+ * the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+ * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+ * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+*/
+
+const nodeList = [];
+const clickCtx = '$clickoutSideCtx';
+let beginClick;
+let seed = 0;
+
+document.addEventListener('mousedown', event => (beginClick = event));
+
+document.addEventListener('mouseup', event => {
+  nodeList.forEach(node => {
+    node[clickCtx].clickoutSideHandler(event, beginClick);
+  });
+});
+
+const clickoutSide = {
+  bind (el, binding, vNode) {
+    nodeList.push(el);
+    const id = seed++;
+    const clickoutSideHandler = (mouseup = {}, mousedown = {}) => {
+      if (!vNode.context // 点击在 vue 实例之外的 DOM 上
+        || !mouseup.target
+        || !mousedown.target
+        || el.contains(mouseup.target) // 鼠标按下时的 DOM 节点是当前展开的组件的子元素
+        || el.contains(mousedown.target) // 鼠标松开时的 DOM 节点是当前展开的组件的子元素
+        || el === mouseup.target // 鼠标松开时的 DOM 节点是当前展开的组件的根元素
+        || (vNode.context.popup // 当前点击元素是有弹出层的
+            && (
+              vNode.context.popup.contains(mouseup.target) // 鼠标按下时的 DOM 节点是当前有弹出层元素的子节点
+                || vNode.context.popup.contains(mousedown.target) // 鼠标松开时的 DOM 节点是当前有弹出层元素的子节点
+            )
+        )
+      ) {
+        return;
+      }
+
+      if (binding.expression // 传入了指令绑定的表达式
+        && el[clickCtx].callbackName // 当前元素的 clickOutside 对象中有回调函数名
+        && vNode.context[el[clickCtx].callbackName] // vNode 中存在回调函数
+      ) {
+        vNode.context[el[clickCtx].callbackName](mouseup, mousedown, el);
+      } else {
+        el[clickCtx].bindingFn && el[clickCtx].bindingFn(mouseup, mousedown, el);
+      }
+    };
+    el[clickCtx] = {
+      id,
+      clickoutSideHandler,
+      callbackName: binding.expression,
+      callbackFn: binding.value
+    };
+  },
+  update (el, binding) {
+    const { expression, value } = binding;
+    el[clickCtx] = { ...el[clickCtx], ...{ callbackName: expression, callbackFn: value } };
+  },
+  unbind (el) {
+    for (let i = 0, len = nodeList.length; i < len; i++) {
+      if (nodeList[i][clickCtx].id === el[clickCtx].id) {
+        nodeList.splice(i, 1);
+        break;
+      }
+    }
+  }
+};
+
+export default clickoutSide;

frontend/src/directive/index.js

@@ -0,0 +1,36 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * 蓝鲸智云-权限中心(BlueKing-IAM) available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * 蓝鲸智云-权限中心(BlueKing-IAM) is licensed under the MIT License.
+ *
+ * License for 蓝鲸智云-权限中心(BlueKing-IAM):
+ *
+ * ---------------------------------------------------
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+ * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+ * the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+ * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+ * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+import Vue from 'vue';
+import clickoutSide from './click-outside';
+
+const directives = {
+  clickoutSide
+};
+
+Object.keys(directives).forEach(key => {
+  Vue.directive(key, directives[key]);
+});

frontend/src/main.js

@@ -55,6 +55,7 @@ import './common/bkmagic';
 // 全量引入自定义图标
 import './assets/iconfont/style.css';
 import '@icon-cool/bk-icon-bk-iam';
+import '@/directive';
 
 Vue.component('app-exception', Exception);
 Vue.component('app-auth', AuthComponent);
@@ -79,8 +80,6 @@ Vue.use(magicbox, {
   i18n: (key, args) => i18n.t(key, args)
 });
 
-console.log('start');
-
 const cn = require('./language/lang/zh');
 
 const en = require('./language/lang/en');