@cmstops/pro-compo 0.1.12 → 0.1.13

package/lib/userDirector/component.js

@@ -1,17 +1,24 @@
 "use strict";
 var vue = require("vue");
 var webVue = require("@arco-design/web-vue");
+var icon = require("@arco-design/web-vue/es/icon");
 var config = require("../config.js");
+var userTree = require("./components/userTree.js");
 var api = require("./script/api.js");
 const _hoisted_1 = { class: "user-select-content" };
 const _hoisted_2 = { class: "user-select-left" };
-const _hoisted_3 = /* @__PURE__ */ vue.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 = vue.defineComponent({
   ...{ name: "userDirector" },
   __name: "component",
   props: {
     BASE_API: {},
     repositoryId: {},
+    defaultData: {},
     visible: { type: Boolean },
     title: {}
   },
@@ -20,47 +27,58 @@ const _sfc_main = vue.defineComponent({
     const props = __props;
     const BASE_API = props.BASE_API || config.DEFAULT_BASE_API;
     const emit = __emit;
-    const loadMore = () => {
-    };
     const RoleTreeData = vue.ref([]);
     const DepartTreeData = vue.ref([]);
-    const fieldNames = {
-      children: "children",
-      title: "alias",
-      key: "node_key"
-    };
+    const userSelectedList = vue.ref([]);
     const selectRoleNode = (selectedKeys, data) => {
       console.log("selectRoleNode", data);
     };
+    const clearUserSelectedList = () => {
+      userSelectedList.value = [];
+    };
+    const loadRoleAllUser = async (id) => {
+      const res = await api.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 api.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 api.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 api.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 = vue.ref({
+      paddingLfet: "0px",
+      paddingRigth: "0px",
+      border: "none",
+      background: "white"
+    });
     const collapseChange = async (keys) => {
       if (keys.includes("Role")) {
         api.getRepoRoleList(BASE_API, { repoID: props.repositoryId }).then((res) => {
@@ -86,22 +104,56 @@ const _sfc_main = vue.defineComponent({
       }
     };
     const allUserList = vue.ref([]);
-    const completeUser = vue.ref();
     const getUserList = async () => {
       const res = await api.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) {
+        webVue.Message.warning("\u6210\u5458\u5DF2\u5B58\u5728");
+      }
+    };
+    const removeUserSelected = (index) => {
+      userSelectedList.value.splice(index, 1);
     };
     vue.onMounted(() => {
       getUserList();
@@ -126,10 +178,10 @@ const _sfc_main = vue.defineComponent({
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createBlock(vue.unref(webVue.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
@@ -140,57 +192,120 @@ const _sfc_main = vue.defineComponent({
         default: vue.withCtx(() => [
           vue.createElementVNode("div", _hoisted_1, [
             vue.createElementVNode("div", _hoisted_2, [
-              vue.createVNode(vue.unref(webVue.AutoComplete), {
-                modelValue: completeUser.value,
-                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => completeUser.value = $event),
-                data: allUserList.value,
+              vue.createVNode(vue.unref(webVue.Select), {
                 placeholder: "\u641C\u7D22\u59D3\u540D\u3001\u7528\u6237\u540D",
-                onSelect: selectUser
-              }, null, 8, ["modelValue", "data"]),
+                "allow-search": "",
+                size: "large",
+                onChange: searchUserChange
+              }, {
+                default: vue.withCtx(() => [
+                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(allUserList.value, (item) => {
+                    return vue.openBlock(), vue.createBlock(vue.unref(webVue.Option), {
+                      key: item.uid,
+                      value: item.uid,
+                      label: item.alias
+                    }, null, 8, ["value", "label"]);
+                  }), 128))
+                ]),
+                _: 1
+              }),
               vue.createVNode(vue.unref(webVue.Collapse), {
                 accordion: "",
+                bordered: false,
                 onChange: collapseChange
               }, {
                 default: vue.withCtx(() => [
                   vue.createVNode(vue.unref(webVue.CollapseItem), {
                     key: "Role",
-                    header: "\u6309\u89D2\u8272\u9009\u62E9"
+                    header: "\u6309\u89D2\u8272\u9009\u62E9",
+                    style: vue.normalizeStyle(collapseStyle.value)
                   }, {
                     default: vue.withCtx(() => [
-                      vue.createVNode(vue.unref(webVue.Tree), {
-                        data: RoleTreeData.value,
-                        "load-more": loadMore,
-                        "field-names": fieldNames,
-                        "action-on-node-click": "expand",
-                        onSelect: selectRoleNode,
-                        onExpand: expandRoleNode
-                      }, null, 8, ["data"])
+                      vue.createVNode(vue.unref(webVue.Scrollbar), { style: { "height": "40vh", "overflow": "auto" } }, {
+                        default: vue.withCtx(() => [
+                          vue.createVNode(userTree, {
+                            list: RoleTreeData.value,
+                            onSelect: selectRoleNode,
+                            onExpand: expandRoleNode,
+                            onAdd: addItem
+                          }, null, 8, ["list"])
+                        ]),
+                        _: 1
+                      })
                     ]),
                     _: 1
-                  }),
+                  }, 8, ["style"]),
                   vue.createVNode(vue.unref(webVue.CollapseItem), {
                     key: "Depart",
-                    header: "\u6309\u7EC4\u7EC7\u67B6\u6784\u9009\u62E9"
+                    header: "\u6309\u7EC4\u7EC7\u67B6\u6784\u9009\u62E9",
+                    style: vue.normalizeStyle(collapseStyle.value)
                   }, {
                     default: vue.withCtx(() => [
-                      vue.createVNode(vue.unref(webVue.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"])
+                      vue.createVNode(vue.unref(webVue.Scrollbar), { style: { "height": "40vh", "overflow": "auto" } }, {
+                        default: vue.withCtx(() => [
+                          vue.createVNode(userTree, {
+                            list: DepartTreeData.value,
+                            onSelect: selectDepartNode,
+                            onExpand: expandDepartNode,
+                            onAdd: addItem
+                          }, null, 8, ["list"])
+                        ]),
+                        _: 1
+                      })
                     ]),
                     _: 1
-                  })
+                  }, 8, ["style"])
                 ]),
                 _: 1
               })
             ]),
-            _hoisted_3
+            vue.createElementVNode("div", _hoisted_3, [
+              vue.createElementVNode("div", _hoisted_4, [
+                vue.createElementVNode("span", null, "\u5DF2\u9009\u6210\u5458(" + vue.toDisplayString(userSelectedList.value.length) + "\u4EBA)", 1),
+                vue.createVNode(vue.unref(webVue.Button), {
+                  type: "text",
+                  size: "mini",
+                  onClick: clearUserSelectedList
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createTextVNode("\u5168\u90E8\u6E05\u9664")
+                  ]),
+                  _: 1
+                })
+              ]),
+              vue.createVNode(vue.unref(webVue.Scrollbar), { style: { "height": "100%", "overflow": "auto" } }, {
+                default: vue.withCtx(() => [
+                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(userSelectedList.value, (item, index) => {
+                    return vue.openBlock(), vue.createElementBlock("div", {
+                      key: item.uid,
+                      class: "user-item"
+                    }, [
+                      vue.createElementVNode("div", _hoisted_5, [
+                        vue.createVNode(vue.unref(webVue.Avatar), {
+                          size: 32,
+                          "image-url": item.avatar
+                        }, null, 8, ["image-url"]),
+                        vue.createElementVNode("div", _hoisted_6, vue.toDisplayString(item.alias), 1)
+                      ]),
+                      vue.createElementVNode("div", _hoisted_7, [
+                        vue.createVNode(vue.unref(webVue.Button), {
+                          type: "primary",
+                          size: "mini",
+                          shape: "circle",
+                          onClick: ($event) => removeUserSelected(index)
+                        }, {
+                          default: vue.withCtx(() => [
+                            vue.createVNode(vue.unref(icon.IconDelete))
+                          ]),
+                          _: 2
+                        }, 1032, ["onClick"])
+                      ])
+                    ]);
+                  }), 128))
+                ]),
+                _: 1
+              })
+            ])
           ])
         ]),
         _: 1

package/lib/userDirector/components/userTree.js

@@ -0,0 +1,77 @@
+"use strict";
+var vue = require("vue");
+var webVue = require("@arco-design/web-vue");
+var icon = require("@arco-design/web-vue/es/icon");
+const _hoisted_1 = { class: "user-item" };
+const _hoisted_2 = { class: "left" };
+const _sfc_main = vue.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 vue.openBlock(), vue.createBlock(vue.unref(webVue.Tree), {
+        data: props.list,
+        "load-more": loadMore,
+        "block-node": "",
+        size: "large",
+        "field-names": fieldNames,
+        "action-on-node-click": "expand",
+        onSelect: select,
+        onExpand: expand
+      }, {
+        icon: vue.withCtx((node) => [
+          !node.isLeaf ? (vue.openBlock(), vue.createBlock(vue.unref(icon.IconUserGroup), { key: 0 })) : vue.createCommentVNode("v-if", true)
+        ]),
+        title: vue.withCtx((nodeData) => [
+          vue.createElementVNode("div", _hoisted_1, [
+            vue.createElementVNode("div", _hoisted_2, [
+              nodeData.isUser ? (vue.openBlock(), vue.createBlock(vue.unref(webVue.Avatar), {
+                key: 0,
+                size: 22,
+                "image-url": nodeData.avatar
+              }, null, 8, ["image-url"])) : vue.createCommentVNode("v-if", true),
+              vue.createElementVNode("span", null, vue.toDisplayString(nodeData.alias), 1)
+            ])
+          ])
+        ]),
+        extra: vue.withCtx((nodeData) => [
+          vue.createVNode(vue.unref(webVue.Button), {
+            class: "tree-action",
+            type: "primary",
+            size: "mini",
+            shape: "circle",
+            onClick: ($event) => addItem(nodeData)
+          }, {
+            default: vue.withCtx(() => [
+              vue.createVNode(vue.unref(icon.IconPlus))
+            ]),
+            _: 2
+          }, 1032, ["onClick"])
+        ]),
+        _: 1
+      }, 8, ["data"]);
+    };
+  }
+});
+module.exports = _sfc_main;

package/lib/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/lib/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cmstops/pro-compo",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "description": "",
   "keywords": [
     "vue",