@cmstops/pro-compo 0.1.11 → 0.1.13

package/es/userDirector/component.js

@@ -1,16 +1,23 @@
-import { defineComponent, ref, onMounted, computed, openBlock, createBlock, unref, withCtx, createTextVNode, toDisplayString, createElementVNode, createVNode } from "vue";
-import { Modal, AutoComplete, Collapse, CollapseItem, Tree } from "@arco-design/web-vue";
+import { defineComponent, ref, onMounted, computed, openBlock, createBlock, unref, withCtx, createTextVNode, toDisplayString, createElementVNode, createVNode, createElementBlock, Fragment, renderList, normalizeStyle } from "vue";
+import { Modal, Select, Option, Collapse, CollapseItem, Scrollbar, Button, Avatar, Message } from "@arco-design/web-vue";
+import { IconDelete } from "@arco-design/web-vue/es/icon";
 import { DEFAULT_BASE_API } from "../config.js";
-import { getRoleAllUser, getDepartUserList, getRepoRoleList, getDepartList, getRepoUserList } from "./script/api.js";
+import _sfc_main$1 from "./components/userTree.js";
+import { getRepoRoleList, getDepartList, getRepoUserList, getRoleAllUser, getDepartUserList } from "./script/api.js";
 const _hoisted_1 = { class: "user-select-content" };
 const _hoisted_2 = { class: "user-select-left" };
-const _hoisted_3 = /* @__PURE__ */ createElementVNode("div", { class: "user-select-right" }, null, -1);
+const _hoisted_3 = { class: "user-select-right" };
+const _hoisted_4 = { class: "user-select-right-title" };
+const _hoisted_5 = { class: "left" };
+const _hoisted_6 = { class: "alias" };
+const _hoisted_7 = { class: "action" };
 const _sfc_main = defineComponent({
   ...{ name: "userDirector" },
   __name: "component",
   props: {
     BASE_API: {},
     repositoryId: {},
+    defaultData: {},
     visible: { type: Boolean },
     title: {}
   },
@@ -19,47 +26,58 @@ const _sfc_main = defineComponent({
     const props = __props;
     const BASE_API = props.BASE_API || DEFAULT_BASE_API;
     const emit = __emit;
-    const loadMore = () => {
-    };
     const RoleTreeData = ref([]);
     const DepartTreeData = ref([]);
-    const fieldNames = {
-      children: "children",
-      title: "alias",
-      key: "node_key"
-    };
+    const userSelectedList = ref([]);
     const selectRoleNode = (selectedKeys, data) => {
       console.log("selectRoleNode", data);
     };
+    const clearUserSelectedList = () => {
+      userSelectedList.value = [];
+    };
+    const loadRoleAllUser = async (id) => {
+      const res = await getRoleAllUser(BASE_API, { id });
+      if (res.code === 0) {
+        return res.message.map((item) => {
+          item.node_key = `role_${id}_${item.uid}`;
+          item.isUser = true;
+          item.isLeaf = true;
+          return item;
+        });
+      }
+      return [];
+    };
     const expandRoleNode = async (selectedKeys, data) => {
       if (data.node.isRole) {
-        const res = await getRoleAllUser(BASE_API, { id: data.node.id });
-        if (res.code === 0) {
-          data.node.children = res.message.map((item) => {
-            item.node_key = `role_${data.node.id}_${item.uid}`;
-            item.isUser = true;
-            item.isLeaf = true;
-            return item;
-          });
-        }
+        data.node.children = await loadRoleAllUser(data.node.id);
       }
     };
     const selectDepartNode = (selectedKeys, data) => {
       console.log("selectDepartNode", data);
     };
+    const loadDepartUserList = async (id) => {
+      const res = await getDepartUserList(BASE_API, { pid: id });
+      if (res.code === 0) {
+        return res.message.map((item) => {
+          item.node_key = `depart_${id}_${item.uid}`;
+          item.isUser = true;
+          item.isLeaf = true;
+          return item;
+        });
+      }
+      return [];
+    };
     const expandDepartNode = async (selectedKeys, data) => {
       if (data.node.isDepart) {
-        const res = await getDepartUserList(BASE_API, { pid: data.node.id });
-        if (res.code === 0) {
-          data.node.children = res.message.map((item) => {
-            item.node_key = `depart_${data.node.id}_${item.uid}`;
-            item.isUser = true;
-            item.isLeaf = true;
-            return item;
-          });
-        }
+        data.node.children = await loadDepartUserList(data.node.id);
       }
     };
+    const collapseStyle = ref({
+      paddingLfet: "0px",
+      paddingRigth: "0px",
+      border: "none",
+      background: "white"
+    });
     const collapseChange = async (keys) => {
       if (keys.includes("Role")) {
         getRepoRoleList(BASE_API, { repoID: props.repositoryId }).then((res) => {
@@ -85,22 +103,56 @@ const _sfc_main = defineComponent({
       }
     };
     const allUserList = ref([]);
-    const completeUser = ref();
     const getUserList = async () => {
       const res = await getRepoUserList(BASE_API, { id: props.repositoryId });
       if (res.code === 0) {
-        allUserList.value = res.message.map((item) => {
-          item.value = item.uid;
-          item.label = item.alias;
-          return item;
+        allUserList.value = res.message;
+      }
+    };
+    const searchUserChange = (value) => {
+      const target = allUserList.value.find((item) => item.uid === value);
+      if (target) {
+        addUserSelectedList(target);
+      }
+    };
+    const userSelectedListFilter = (user) => {
+      const result = { ...user };
+      const userList = [].concat(userSelectedList.value);
+      for (const i of userList) {
+        if (result.id === i.id) {
+          return false;
+        }
+      }
+      return result;
+    };
+    const addItem = async (nodeData) => {
+      if (nodeData.isUser) {
+        addUserSelectedList(nodeData);
+      }
+      if (nodeData.isRole) {
+        const users = await loadRoleAllUser(nodeData.id);
+        users.forEach((user) => {
+          addUserSelectedList(user, false);
+        });
+      }
+      if (nodeData.isDepart) {
+        const users = await loadDepartUserList(nodeData.id);
+        users.forEach((user) => {
+          addUserSelectedList(user, false);
         });
       }
     };
-    const selectUser = (value) => {
-      console.log(value);
-      setTimeout(() => {
-        completeUser.value = "";
-      }, 100);
+    const addUserSelectedList = (user, tip = true) => {
+      user = userSelectedListFilter(user);
+      if (user) {
+        user.rtype = "user";
+        userSelectedList.value.push(user);
+      } else if (tip) {
+        Message.warning("\u6210\u5458\u5DF2\u5B58\u5728");
+      }
+    };
+    const removeUserSelected = (index) => {
+      userSelectedList.value.splice(index, 1);
     };
     onMounted(() => {
       getUserList();
@@ -125,10 +177,10 @@ const _sfc_main = defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(Modal), {
         visible: visible.value,
-        width: "986px",
+        width: "700px",
         "mask-closable": false,
-        footer: false,
         "title-align": "start",
+        "body-class": "user-director-modal-body",
         "unmount-on-close": "",
         onOk: handleOk,
         onCancel: handleCancel
@@ -139,57 +191,120 @@ const _sfc_main = defineComponent({
         default: withCtx(() => [
           createElementVNode("div", _hoisted_1, [
             createElementVNode("div", _hoisted_2, [
-              createVNode(unref(AutoComplete), {
-                modelValue: completeUser.value,
-                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => completeUser.value = $event),
-                data: allUserList.value,
+              createVNode(unref(Select), {
                 placeholder: "\u641C\u7D22\u59D3\u540D\u3001\u7528\u6237\u540D",
-                onSelect: selectUser
-              }, null, 8, ["modelValue", "data"]),
+                "allow-search": "",
+                size: "large",
+                onChange: searchUserChange
+              }, {
+                default: withCtx(() => [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(allUserList.value, (item) => {
+                    return openBlock(), createBlock(unref(Option), {
+                      key: item.uid,
+                      value: item.uid,
+                      label: item.alias
+                    }, null, 8, ["value", "label"]);
+                  }), 128))
+                ]),
+                _: 1
+              }),
               createVNode(unref(Collapse), {
                 accordion: "",
+                bordered: false,
                 onChange: collapseChange
               }, {
                 default: withCtx(() => [
                   createVNode(unref(CollapseItem), {
                     key: "Role",
-                    header: "\u6309\u89D2\u8272\u9009\u62E9"
+                    header: "\u6309\u89D2\u8272\u9009\u62E9",
+                    style: normalizeStyle(collapseStyle.value)
                   }, {
                     default: withCtx(() => [
-                      createVNode(unref(Tree), {
-                        data: RoleTreeData.value,
-                        "load-more": loadMore,
-                        "field-names": fieldNames,
-                        "action-on-node-click": "expand",
-                        onSelect: selectRoleNode,
-                        onExpand: expandRoleNode
-                      }, null, 8, ["data"])
+                      createVNode(unref(Scrollbar), { style: { "height": "40vh", "overflow": "auto" } }, {
+                        default: withCtx(() => [
+                          createVNode(_sfc_main$1, {
+                            list: RoleTreeData.value,
+                            onSelect: selectRoleNode,
+                            onExpand: expandRoleNode,
+                            onAdd: addItem
+                          }, null, 8, ["list"])
+                        ]),
+                        _: 1
+                      })
                     ]),
                     _: 1
-                  }),
+                  }, 8, ["style"]),
                   createVNode(unref(CollapseItem), {
                     key: "Depart",
-                    header: "\u6309\u7EC4\u7EC7\u67B6\u6784\u9009\u62E9"
+                    header: "\u6309\u7EC4\u7EC7\u67B6\u6784\u9009\u62E9",
+                    style: normalizeStyle(collapseStyle.value)
                   }, {
                     default: withCtx(() => [
-                      createVNode(unref(Tree), {
-                        size: "large",
-                        "block-node": "",
-                        "field-names": fieldNames,
-                        data: DepartTreeData.value,
-                        "load-more": loadMore,
-                        "action-on-node-click": "expand",
-                        onSelect: selectDepartNode,
-                        onExpand: expandDepartNode
-                      }, null, 8, ["data"])
+                      createVNode(unref(Scrollbar), { style: { "height": "40vh", "overflow": "auto" } }, {
+                        default: withCtx(() => [
+                          createVNode(_sfc_main$1, {
+                            list: DepartTreeData.value,
+                            onSelect: selectDepartNode,
+                            onExpand: expandDepartNode,
+                            onAdd: addItem
+                          }, null, 8, ["list"])
+                        ]),
+                        _: 1
+                      })
                     ]),
                     _: 1
-                  })
+                  }, 8, ["style"])
                 ]),
                 _: 1
               })
             ]),
-            _hoisted_3
+            createElementVNode("div", _hoisted_3, [
+              createElementVNode("div", _hoisted_4, [
+                createElementVNode("span", null, "\u5DF2\u9009\u6210\u5458(" + toDisplayString(userSelectedList.value.length) + "\u4EBA)", 1),
+                createVNode(unref(Button), {
+                  type: "text",
+                  size: "mini",
+                  onClick: clearUserSelectedList
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode("\u5168\u90E8\u6E05\u9664")
+                  ]),
+                  _: 1
+                })
+              ]),
+              createVNode(unref(Scrollbar), { style: { "height": "100%", "overflow": "auto" } }, {
+                default: withCtx(() => [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(userSelectedList.value, (item, index) => {
+                    return openBlock(), createElementBlock("div", {
+                      key: item.uid,
+                      class: "user-item"
+                    }, [
+                      createElementVNode("div", _hoisted_5, [
+                        createVNode(unref(Avatar), {
+                          size: 32,
+                          "image-url": item.avatar
+                        }, null, 8, ["image-url"]),
+                        createElementVNode("div", _hoisted_6, toDisplayString(item.alias), 1)
+                      ]),
+                      createElementVNode("div", _hoisted_7, [
+                        createVNode(unref(Button), {
+                          type: "primary",
+                          size: "mini",
+                          shape: "circle",
+                          onClick: ($event) => removeUserSelected(index)
+                        }, {
+                          default: withCtx(() => [
+                            createVNode(unref(IconDelete))
+                          ]),
+                          _: 2
+                        }, 1032, ["onClick"])
+                      ])
+                    ]);
+                  }), 128))
+                ]),
+                _: 1
+              })
+            ])
           ])
         ]),
         _: 1

package/es/userDirector/components/userTree.js

@@ -0,0 +1,76 @@
+import { defineComponent, openBlock, createBlock, unref, withCtx, createCommentVNode, createElementVNode, toDisplayString, createVNode } from "vue";
+import { Tree, Avatar, Button } from "@arco-design/web-vue";
+import { IconUserGroup, IconPlus } from "@arco-design/web-vue/es/icon";
+const _hoisted_1 = { class: "user-item" };
+const _hoisted_2 = { class: "left" };
+const _sfc_main = defineComponent({
+  __name: "userTree",
+  props: {
+    list: {}
+  },
+  emits: ["select", "expand", "add"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const loadMore = () => {
+    };
+    const fieldNames = {
+      children: "children",
+      title: "alias",
+      key: "node_key"
+    };
+    const emit = __emit;
+    const select = (selectedKeys, data) => {
+      emit("select", selectedKeys, data);
+    };
+    const expand = (expandedKeys, data) => {
+      emit("expand", expandedKeys, data);
+    };
+    const addItem = (nodeData) => {
+      emit("add", nodeData);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Tree), {
+        data: props.list,
+        "load-more": loadMore,
+        "block-node": "",
+        size: "large",
+        "field-names": fieldNames,
+        "action-on-node-click": "expand",
+        onSelect: select,
+        onExpand: expand
+      }, {
+        icon: withCtx((node) => [
+          !node.isLeaf ? (openBlock(), createBlock(unref(IconUserGroup), { key: 0 })) : createCommentVNode("v-if", true)
+        ]),
+        title: withCtx((nodeData) => [
+          createElementVNode("div", _hoisted_1, [
+            createElementVNode("div", _hoisted_2, [
+              nodeData.isUser ? (openBlock(), createBlock(unref(Avatar), {
+                key: 0,
+                size: 22,
+                "image-url": nodeData.avatar
+              }, null, 8, ["image-url"])) : createCommentVNode("v-if", true),
+              createElementVNode("span", null, toDisplayString(nodeData.alias), 1)
+            ])
+          ])
+        ]),
+        extra: withCtx((nodeData) => [
+          createVNode(unref(Button), {
+            class: "tree-action",
+            type: "primary",
+            size: "mini",
+            shape: "circle",
+            onClick: ($event) => addItem(nodeData)
+          }, {
+            default: withCtx(() => [
+              createVNode(unref(IconPlus))
+            ]),
+            _: 2
+          }, 1032, ["onClick"])
+        ]),
+        _: 1
+      }, 8, ["data"]);
+    };
+  }
+});
+export { _sfc_main as default };

package/es/userDirector/style/index.css

@@ -1,8 +1,55 @@
+.user-director-modal-body {
+  padding: 0;
+}
+.user-director-modal-body .arco-collapse {
+  height: calc(100% - 36px);
+}
+.user-director-modal-body .arco-collapse-item-content {
+  padding-left: 10px;
+  padding-right: 0;
+  background: white;
+}
 .user-select-content {
   height: 60vh;
+  display: flex;
 }
 .user-select-content .user-select-left,
 .user-select-content .user-select-right {
   width: 50%;
   height: 100%;
 }
+.user-select-content .user-select-left {
+  border-right: 1px solid var(--color-neutral-3);
+}
+.user-select-content .user-select-right .user-select-right-title {
+  display: flex;
+  justify-content: space-between;
+  font-size: 14px;
+  font-weight: 500;
+  padding: 6px 16px;
+  border-bottom: 1px solid var(--color-neutral-3);
+}
+.user-select-content .user-select-right .user-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 5px 16px;
+}
+.user-select-content .user-select-right .user-item .action {
+  display: none;
+}
+.user-select-content .user-select-right .user-item:hover {
+  background-color: var(--color-fill-1);
+}
+.user-select-content .user-select-right .user-item:hover .action {
+  display: flex;
+}
+.user-select-content .tree-action {
+  position: absolute;
+  top: 7px;
+  right: 30px;
+  display: none;
+}
+.user-select-content .arco-tree-node:hover .tree-action {
+  display: inline-block;
+}

package/es/userDirector/style/index.less

@@ -1,8 +1,58 @@
+.user-director-modal-body {
+  padding: 0;
+  .arco-collapse {
+    height: calc(100% - 36px);
+  }
+  
+  .arco-collapse-item-content {
+    padding-left: 10px;
+    padding-right: 0;
+    background: white;
+  }
+}
 .user-select-content {
   height: 60vh;
+  display: flex;
   .user-select-left,
   .user-select-right {
     width: 50%;
     height: 100%;
   }
+  .user-select-left {
+    border-right: 1px solid var(--color-neutral-3);
+  }
+  .user-select-right {
+    .user-select-right-title {
+      display: flex;
+      justify-content: space-between;
+      font-size: 14px;
+      font-weight: 500;
+      padding: 6px 16px;
+      border-bottom: 1px solid var(--color-neutral-3);
+    }
+    .user-item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 5px 16px;
+      .action {
+        display: none;
+      }
+      &:hover {
+        background-color: var(--color-fill-1);
+        .action {
+          display: flex;
+        }
+      }
+    }
+  }
+  .tree-action {
+    position: absolute;
+    top: 7px;
+    right: 30px;
+    display: none;
+  }
+  .arco-tree-node:hover .tree-action {
+    display: inline-block;
+  }
 }

package/lib/index.css

@@ -2113,19 +2113,152 @@
 .empty-data-container .slot-view {
   margin-top: 16px;
 }
-.tooltip-button {
+.filter-wrp .tooltip-button {
   height: auto;
   padding: 20px;
 }
+.filter-wrp .dop.active {
+  color: #165dff;
+}
+.filter-wrp .dop .label {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+.filter-wrp .filter-view-container {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+  font-size: 14px;
+}
+.filter-wrp .filter-search {
+  display: flex;
+  gap: 10px;
+  width: 180px;
+  margin-right: 10px;
+}
+.filter-wrp .filter-content {
+  position: relative;
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: space-between;
+}
+.filter-wrp .left {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+.filter-wrp .right {
+  position: absolute;
+  right: 0;
+  z-index: 1;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  height: 100%;
+  padding-left: 20px;
+  background: white;
+}
+.filter-wrp .more-btn {
+  margin-right: 10px;
+}
+.filter-wrp .right-prefix {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+.filter-wrp .filter-pannel {
+  display: flex;
+  gap: 10px;
+  padding: 10px;
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+}
+.filter-wrp .filter-item-view {
+  position: relative;
+  display: flex;
+  overflow: hidden;
+}
+.filter-wrp .filter-item-view .show-view {
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  background: #fff;
+  pointer-events: none;
+}
+.filter-wrp .filter-item-view .select-view {
+  position: absolute;
+  z-index: 0;
+  width: 100%;
+}
+.filter-wrp .hasvalue-btn {
+  color: #165dff;
+  background-color: #e8f3ff;
+  border-right: none !important;
+}
+.filter-wrp .right-prefix {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
 .large {
   width: 40px !important;
   height: 40px !important;
 }
+.user-director-modal-body {
+  padding: 0;
+}
+.user-director-modal-body .arco-collapse {
+  height: calc(100% - 36px);
+}
+.user-director-modal-body .arco-collapse-item-content {
+  padding-left: 10px;
+  padding-right: 0;
+  background: white;
+}
 .user-select-content {
   height: 60vh;
+  display: flex;
 }
 .user-select-content .user-select-left,
 .user-select-content .user-select-right {
   width: 50%;
   height: 100%;
 }
+.user-select-content .user-select-left {
+  border-right: 1px solid var(--color-neutral-3);
+}
+.user-select-content .user-select-right .user-select-right-title {
+  display: flex;
+  justify-content: space-between;
+  font-size: 14px;
+  font-weight: 500;
+  padding: 6px 16px;
+  border-bottom: 1px solid var(--color-neutral-3);
+}
+.user-select-content .user-select-right .user-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 5px 16px;
+}
+.user-select-content .user-select-right .user-item .action {
+  display: none;
+}
+.user-select-content .user-select-right .user-item:hover {
+  background-color: var(--color-fill-1);
+}
+.user-select-content .user-select-right .user-item:hover .action {
+  display: flex;
+}
+.user-select-content .tree-action {
+  position: absolute;
+  top: 7px;
+  right: 30px;
+  display: none;
+}
+.user-select-content .arco-tree-node:hover .tree-action {
+  display: inline-block;
+}