@cmstops/pro-compo 0.1.12 → 0.1.13

package/es/mediaFilter/style/index.css

@@ -1,40 +1,40 @@
-.tooltip-button {
+.filter-wrp .tooltip-button {
   height: auto;
   padding: 20px;
 }
-.dop.active {
+.filter-wrp .dop.active {
   color: #165dff;
 }
-.dop .label {
+.filter-wrp .dop .label {
   display: flex;
   gap: 10px;
   align-items: center;
 }
-.filter-view-container {
+.filter-wrp .filter-view-container {
   display: flex;
   align-items: center;
   margin-bottom: 10px;
   font-size: 14px;
 }
-.filter-search {
+.filter-wrp .filter-search {
   display: flex;
   gap: 10px;
   width: 180px;
   margin-right: 10px;
 }
-.filter-content {
+.filter-wrp .filter-content {
   position: relative;
   display: flex;
   flex: 1;
   align-items: center;
   justify-content: space-between;
 }
-.left {
+.filter-wrp .left {
   display: flex;
   gap: 10px;
   align-items: center;
 }
-.right {
+.filter-wrp .right {
   position: absolute;
   right: 0;
   z-index: 1;
@@ -45,15 +45,15 @@
   padding-left: 20px;
   background: white;
 }
-.more-btn {
+.filter-wrp .more-btn {
   margin-right: 10px;
 }
-.right-prefix {
+.filter-wrp .right-prefix {
   display: flex;
   gap: 10px;
   align-items: center;
 }
-.filter-pannel {
+.filter-wrp .filter-pannel {
   display: flex;
   gap: 10px;
   padding: 10px;
@@ -61,29 +61,29 @@
   border-radius: 6px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 }
-.filter-item-view {
+.filter-wrp .filter-item-view {
   position: relative;
   display: flex;
   overflow: hidden;
 }
-.filter-item-view .show-view {
+.filter-wrp .filter-item-view .show-view {
   z-index: 1;
   width: 100%;
   height: 100%;
   background: #fff;
   pointer-events: none;
 }
-.filter-item-view .select-view {
+.filter-wrp .filter-item-view .select-view {
   position: absolute;
   z-index: 0;
   width: 100%;
 }
-.hasvalue-btn {
+.filter-wrp .hasvalue-btn {
   color: #165dff;
   background-color: #e8f3ff;
   border-right: none !important;
 }
-.right-prefix {
+.filter-wrp .right-prefix {
   display: flex;
   gap: 10px;
   align-items: center;

package/es/mediaFilter/style/index.less

@@ -1,108 +1,110 @@
-.tooltip-button {
-  height: auto;
-  padding: 20px;
-}
+.filter-wrp {
+  .tooltip-button {
+    height: auto;
+    padding: 20px;
+  }
 
-// DocFilter 组件内部样式
-.dop.active {
-  color: #165dff;
-}
+  // DocFilter 组件内部样式
+  .dop.active {
+    color: #165dff;
+  }
 
-.dop .label {
-  display: flex;
-  gap: 10px;
-  align-items: center;
-}
+  .dop .label {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+  }
 
-// FilterGroup 内部样式
-.filter-view-container {
-  display: flex;
-  align-items: center;
-  margin-bottom: 10px;
-  font-size: 14px;
-}
+  // FilterGroup 内部样式
+  .filter-view-container {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+    font-size: 14px;
+  }
 
-.filter-search {
-  display: flex;
-  gap: 10px;
-  width: 180px;
-  margin-right: 10px;
-}
+  .filter-search {
+    display: flex;
+    gap: 10px;
+    width: 180px;
+    margin-right: 10px;
+  }
 
-.filter-content {
-  position: relative;
-  display: flex;
-  flex: 1;
-  align-items: center;
-  justify-content: space-between;
-}
+  .filter-content {
+    position: relative;
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: space-between;
+  }
 
-.left {
-  display: flex;
-  gap: 10px;
-  align-items: center;
-}
+  .left {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+  }
 
-.right {
-  position: absolute;
-  right: 0;
-  z-index: 1;
-  display: flex;
-  flex-wrap: nowrap;
-  align-items: center;
-  height: 100%;
-  padding-left: 20px;
-  background: white;
-}
+  .right {
+    position: absolute;
+    right: 0;
+    z-index: 1;
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    height: 100%;
+    padding-left: 20px;
+    background: white;
+  }
 
-.more-btn {
-  margin-right: 10px;
-}
+  .more-btn {
+    margin-right: 10px;
+  }
 
-.right-prefix {
-  display: flex;
-  gap: 10px;
-  align-items: center;
-}
+  .right-prefix {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+  }
 
-.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-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 Item 内部样式
-.filter-item-view {
-  position: relative;
-  display: flex;
-  overflow: hidden;
-}
+  // Filter Item 内部样式
+  .filter-item-view {
+    position: relative;
+    display: flex;
+    overflow: hidden;
+  }
 
-.filter-item-view .show-view {
-  z-index: 1;
-  width: 100%;
-  height: 100%;
-  background: #fff;
-  pointer-events: none;
-}
+  .filter-item-view .show-view {
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    background: #fff;
+    pointer-events: none;
+  }
 
-.filter-item-view .select-view {
-  position: absolute;
-  z-index: 0;
-  width: 100%;
-}
+  .filter-item-view .select-view {
+    position: absolute;
+    z-index: 0;
+    width: 100%;
+  }
 
-.hasvalue-btn {
-  color: #165dff;
-  background-color: #e8f3ff;
-  border-right: none !important;
-}
+  .hasvalue-btn {
+    color: #165dff;
+    background-color: #e8f3ff;
+    border-right: none !important;
+  }
 
-.right-prefix {
-  display: flex;
-  gap: 10px;
-  align-items: center;
+  .right-prefix {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+  }
 }

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