@cgboiler/biz-mobile 1.3.0 → 1.5.0

package/es/index.d.ts

@@ -6,7 +6,7 @@ declare namespace _default {
 }
 export default _default;
 export function install(app: any): void;
-export const version: "1.2.0";
+export const version: "1.4.0";
 import OrgPicker from './org-picker';
 import ProjectSelect from './project-select';
 export { OrgPicker, ProjectSelect };

package/es/index.js

@@ -1,6 +1,6 @@
 import OrgPicker from "./org-picker";
 import ProjectSelect from "./project-select";
-const version = "1.2.0";
+const version = "1.4.0";
 function install(app) {
   const components = [
     OrgPicker,

package/es/org-picker/OrgPicker.js

@@ -1,7 +1,8 @@
 import { createVNode as _createVNode, createTextVNode as _createTextVNode } from "vue";
 import "./_atomic.css";
-import { defineComponent, ref, computed } from "vue";
-import { ActionSheet, Search, List, Image } from "vant";
+import { defineComponent, ref, computed, watch } from "vue";
+import { ActionSheet, Search, List, Image, Empty } from "vant";
+import DeptImg from "./components/deptImg";
 import { orgPickerProps } from "./types";
 import { useApi } from "./useApi";
 import "./index.css";
@@ -14,10 +15,17 @@ var stdin_default = defineComponent({
   }) {
     const {
       orgList,
-      getOrgList
+      getOrgList,
+      currentDeptId,
+      deptPath,
+      searchOrgList
     } = useApi();
     getOrgList();
     const handleSelect = (item) => {
+      if (item.type === "dept") {
+        getOrgList(item.id);
+        return;
+      }
       if (props.multiple) {
         const currentValue = props.modelValue ? [...Array.isArray(props.modelValue) ? props.modelValue : [props.modelValue]] : [];
         const index = currentValue.findIndex((selected) => selected.id === item.id);
@@ -38,10 +46,20 @@ var stdin_default = defineComponent({
     const keyword = ref("");
     const loading = ref(false);
     const finished = ref(true);
+    watch(keyword, (newKeyword) => {
+      if (newKeyword) {
+        searchOrgList(newKeyword);
+      } else {
+        getOrgList(currentDeptId.value);
+      }
+    });
     const filteredOrgList = computed(() => {
-      return orgList.value.filter((item) => {
-        return item.name.toLowerCase().includes(keyword.value.toLowerCase());
-      }).slice(0, 300);
+      if (keyword.value) {
+        return orgList.value;
+      }
+      const departments = orgList.value.filter((item) => item.type === "dept");
+      const personnel = orgList.value.filter((item) => item.type !== "dept");
+      return [...personnel, ...departments];
     });
     const isSelected = (item) => {
       var _a;
@@ -70,7 +88,23 @@ var stdin_default = defineComponent({
         "onUpdate:modelValue": ($event) => keyword.value = $event,
         "placeholder": "\u641C\u7D22\u4EBA\u5458",
         "class": "search-bar"
-      }, null), _createVNode(List, {
+      }, null), !keyword.value && _createVNode("div", {
+        "class": "breadcrumb-nav"
+      }, [deptPath.value.map((dept, index) => _createVNode("span", {
+        "key": dept.id
+      }, [_createVNode("span", {
+        "class": ["dept-name", index === deptPath.value.length - 1 ? "current-dept" : ""],
+        "onClick": () => handleSelect({
+          id: dept.id,
+          type: "dept"
+        })
+      }, [dept.name]), index < deptPath.value.length - 1 && _createVNode("span", {
+        "class": "separator"
+      }, [_createTextVNode(" / ")])]))]), _createVNode("div", {
+        "class": "feed-list-wrap"
+      }, [!keyword.value && filteredOrgList.value.filter((item) => item.type !== "dept").length === 0 ? _createVNode(Empty, {
+        "description": "\u8BE5\u90E8\u95E8\u4E0B\u6CA1\u6709\u4EBA\u5458"
+      }, null) : _createVNode(List, {
         "loading": loading.value,
         "finished": finished.value,
         "onLoad": onLoad
@@ -78,15 +112,32 @@ var stdin_default = defineComponent({
         default: () => [filteredOrgList.value.map((item) => _createVNode("div", {
           "class": ["org-item", isSelected(item) ? "selected" : ""],
           "onClick": () => handleSelect(item)
+        }, [item.type === "dept" ? _createVNode("div", {
+          "class": "org-avatar"
+        }, [_createVNode(DeptImg, null, null)]) : _createVNode(Image, {
+          "class": "org-avatar",
+          "src": item.avatar
+        }, null), _createVNode("div", {
+          "class": "org-name"
+        }, [item.name])]))]
+      }), keyword.value && _createVNode(List, {
+        "loading": loading.value,
+        "finished": finished.value,
+        "onLoad": onLoad,
+        "class": "search-result-list"
+      }, {
+        default: () => [filteredOrgList.value.filter((item) => item.type !== "dept").map((item) => _createVNode("div", {
+          "class": ["org-item", isSelected(item) ? "selected" : ""],
+          "onClick": () => handleSelect(item)
         }, [_createVNode(Image, {
           "class": "org-avatar",
-          "width": "40",
-          "height": "40",
           "src": item.avatar
         }, null), _createVNode("div", {
           "class": "org-name"
         }, [item.name])]))]
-      }), props.multiple && _createVNode("div", {
+      }), keyword.value && filteredOrgList.value.filter((item) => item.type !== "dept").length === 0 && _createVNode("div", {
+        "class": "empty-search-result"
+      }, [_createTextVNode("\u672A\u627E\u5230\u76F8\u5173\u4EBA\u5458")])]), props.multiple && _createVNode("div", {
         "class": "bottom-section"
       }, [Array.isArray(props.modelValue) && props.modelValue.length > 0 && _createVNode("div", {
         "class": "selected-items"

package/es/org-picker/components/_atomic.css

@@ -0,0 +1,32 @@
+
+.cgx-atm .flex {
+  align-items: initial;
+  flex-direction: initial;
+  justify-content: initial;
+  flex-wrap: initial;
+}
+.cgx-atm .flex-row {
+  flex-direction: row;
+}
+.cgx-atm .flex-col {
+  flex-direction: column;
+}
+.cgx-atm .justify-center {
+  justify-content: center;
+}
+.cgx-atm .justify-between {
+  justify-content: space-between;
+}
+.cgx-atm .justify-around {
+  justify-content: space-around;
+}
+.cgx-atm .justify-end {
+  justify-content: flex-end;
+}
+.cgx-atm .items-center {
+  align-items: center;
+}
+.cgx-atm .flex-wrap {
+  flex-wrap: wrap;
+}
+  

package/es/org-picker/components/deptImg.d.ts

@@ -0,0 +1,2 @@
+declare const DeptImg: () => import("vue/jsx-runtime").JSX.Element;
+export default DeptImg;

package/es/org-picker/components/deptImg.js

@@ -0,0 +1,18 @@
+import { createVNode as _createVNode } from "vue";
+import "./_atomic.css";
+const DeptImg = () => _createVNode("svg", {
+  "style": "width: 100%;height: 100%;",
+  "viewBox": "0 0 1204 1024",
+  "version": "1.1",
+  "xmlns": "http://www.w3.org/2000/svg"
+}, [_createVNode("path", {
+  "d": "M561.63235285 164.57352927h335.01838211c27.29779432 0 49.63235285 22.33455854 49.63235366 49.63235284v62.04044147c0 27.29779432-22.33455854 49.63235285-49.63235366 49.63235284H561.63235285c-27.29779432 0-49.63235285-22.33455854-49.63235285-49.63235284v-62.04044147c0-27.29779432 22.33455854-49.63235285 49.63235285-49.63235284z",
+  "fill": "#AFFCFE"
+}, null), _createVNode("path", {
+  "d": "M983.50735284 933.875H189.38970568c-54.59558862 0-99.26470568-44.66911789-99.26470568-99.26470568V189.38970568c0-54.59558862 44.66911789-99.26470568 99.26470568-99.26470568h285.38602928c68.24448496 18.61213211 54.59558862 53.35477927 99.2647065 99.26470568l31.02021992 49.63235286H983.50735284c54.59558862 0 99.26470568 44.66911789 99.26470569 99.2647065v496.32352928c0 54.59558862-44.66911789 99.26470568-99.26470569 99.26470568z",
+  "fill": "#2F77F1"
+}, null)]);
+var stdin_default = DeptImg;
+export {
+  stdin_default as default
+};

package/es/org-picker/index.css

@@ -1 +1 @@
-:root:root{--van-action-sheet-max-height: 100%}.org-list{height:90vh;display:flex;flex-direction:column}.org-list .search-bar{position:-webkit-sticky;position:-webkit-sticky;position:sticky;top:0;z-index:1}.org-list .bottom-section{border-top:1px solid #eee;background-color:#fff}.org-list .bottom-section .selected-items{display:flex;flex-wrap:nowrap;padding:12px 16px;gap:12px;background-color:#fff;overflow-x:auto;height:35px}.org-list .bottom-section .selected-items .selected-tag{flex-shrink:0;background:none;border:none;padding:0;margin:0}.org-list .bottom-section .selected-items .selected-tag .tag-avatar{width:32px;height:32px;cursor:pointer;border-radius:4px;overflow:hidden}.org-list .van-list{flex:1;overflow-y:auto;padding:0 16px}.org-list .org-item{padding:12px 0;border-bottom:1px solid #eee;cursor:pointer;display:flex;align-items:center;gap:12px}.org-list .org-item.selected{color:var(--van-primary-color)}.org-list .org-item .org-avatar{flex-shrink:0;border-radius:4px;overflow:hidden}.org-list .org-item .org-name{font-size:14px;flex:1}.org-list .org-item:last-child{border-bottom:none}.org-list .action-buttons{padding:16px;display:flex;justify-content:center;border-top:1px solid #eee}.org-list .action-buttons .confirm-button{background-color:var(--van-primary-color);color:#fff;padding:10px 0;border-radius:4px;text-align:center;width:100%;font-size:14px}
+:root:root{--van-action-sheet-max-height: 100%}.org-list{height:85vh;display:flex;flex-direction:column}.org-list .breadcrumb-nav{margin-bottom:4px;padding:2px 16px;border-radius:4px;font-size:12px}.org-list .breadcrumb-nav .dept-name.current-dept{color:#969799}.org-list .breadcrumb-nav .separator{color:#969799;margin:0 4px}.org-list .search-bar{position:-webkit-sticky;position:-webkit-sticky;position:sticky;top:0;z-index:1}.org-list .bottom-section{border-top:1px solid #eee;background-color:#fff}.org-list .bottom-section .selected-items{display:flex;flex-wrap:nowrap;padding:12px 16px;gap:12px;background-color:#fff;overflow-x:auto;height:35px}.org-list .bottom-section .selected-items .selected-tag{flex-shrink:0;background:none;border:none;padding:0;margin:0}.org-list .bottom-section .selected-items .selected-tag .tag-avatar{width:36px;height:36px}.org-list .bottom-section .selected-items .selected-tag .tag-avatar img{border-radius:4px;border:1px solid #eee}.org-list .van-list{flex:1;overflow-y:auto;padding:0 16px}.org-list .feed-list-wrap{flex:1;display:flex;overflow:hidden;position:relative;justify-content:center}.org-list .search-result-list{position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;background-color:#fff;overflow-y:auto;padding:0 16px}.org-list .org-item{padding:12px 0;border-bottom:1px solid #eee;cursor:pointer;display:flex;align-items:center;gap:12px}.org-list .org-item.selected{color:var(--van-primary-color)}.org-list .org-item .org-avatar{flex-shrink:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center}.org-list .org-item .org-avatar img{border-radius:4px;border:1px solid #eee}.org-list .org-item .org-name{font-size:14px;flex:1}.org-list .org-item:last-child{border-bottom:none}.org-list .action-buttons{padding:16px;display:flex;justify-content:center;border-top:1px solid #eee}.org-list .action-buttons .confirm-button{background-color:var(--van-primary-color);color:#fff;padding:10px 0;border-radius:4px;text-align:center;width:100%;font-size:14px}

package/es/org-picker/index.less

@@ -2,10 +2,28 @@
   --van-action-sheet-max-height: 100%;
 }
 .org-list {
-  height: 90vh;
+  height: 85vh;
   display: flex;
   flex-direction: column;
 
+  .breadcrumb-nav {
+    margin-bottom: 4px;
+    padding: 2px 16px;
+    border-radius: 4px;
+    font-size: 12px;
+
+    .dept-name {
+      &.current-dept {
+        color: #969799; /* 提示文字颜色 */
+      }
+    }
+
+    .separator {
+      color: #969799;
+      margin: 0 4px;
+    }
+  }
+
   .search-bar {
     position: sticky;
     top: 0;
@@ -33,11 +51,12 @@
         margin: 0;
 
         .tag-avatar {
-          width: 32px;
-          height: 32px;
-          cursor: pointer;
-          border-radius: 4px;
-          overflow: hidden;
+          width: 36px;
+          height: 36px;
+          img {
+            border-radius: 4px;
+            border: 1px solid #eee;
+          }
         }
       }
     }
@@ -49,6 +68,25 @@
     padding: 0 16px;
   }
 
+  .feed-list-wrap {
+    flex: 1;
+    display: flex;
+    overflow: hidden;
+    position: relative;
+    justify-content: center;
+  }
+  .search-result-list {
+    position: absolute;
+    top: 0; /* Adjust based on search bar and breadcrumb height */
+    left: 0;
+    right: 0;
+    bottom: 0; /* Adjust based on bottom section height if multiple is true */
+    z-index: 1;
+    background-color: #fff; /* Ensure background is white */
+    overflow-y: auto;
+    padding: 0 16px;
+  }
+
   .org-item {
     padding: 12px 0;
     border-bottom: 1px solid #eee;
@@ -63,8 +101,15 @@
 
     .org-avatar {
       flex-shrink: 0;
-      border-radius: 4px;
-      overflow: hidden;
+      width: 40px;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      img {
+        border-radius: 4px;
+        border: 1px solid #eee;
+      }
     }
 
     .org-name {

package/es/org-picker/types.d.ts

@@ -2,6 +2,7 @@ import { ExtractPropTypes, PropType } from 'vue';
 export interface OrgItem {
     id: string | number;
     name: string;
+    type: string;
     avatar?: string;
 }
 export declare const orgPickerProps: {

package/es/org-picker/useApi.d.ts

@@ -3,11 +3,25 @@ export declare const useApi: () => {
     orgList: import("vue").Ref<{
         id: string | number;
         name: string;
+        type: string;
         avatar?: string | undefined;
     }[], OrgItem[] | {
         id: string | number;
         name: string;
+        type: string;
         avatar?: string | undefined;
     }[]>;
-    getOrgList: () => Promise<void>;
+    getOrgList: (deptId?: string) => Promise<void>;
+    currentDeptId: import("vue").Ref<string, string>;
+    deptPath: import("vue").Ref<{
+        id: string | number;
+        name: string;
+    }[], {
+        id: string | number;
+        name: string;
+    }[] | {
+        id: string | number;
+        name: string;
+    }[]>;
+    searchOrgList: import("lodash-es").DebouncedFunc<(userName: string) => Promise<void>>;
 };