@fmdevui/fm-dev 1.0.62 → 1.0.64

package/es/component.mjs

@@ -1,5 +1,5 @@
 import { FmLogin } from './packages/core/ui/login/index.mjs';
-import { FmTransfer, FmNoticeBar, Fmselect, FmAutocomplete, Fminputdropdown } from './packages/core/ui/components/index.mjs';
+import { FmTransfer, FmNoticeBar, Fmselect, FmAutocomplete, Fminputdropdown, FmTree } from './packages/core/ui/components/index.mjs';
 
 const plugins = [
   FmLogin,
@@ -7,7 +7,8 @@ const plugins = [
   FmNoticeBar,
   Fmselect,
   FmAutocomplete,
-  Fminputdropdown
+  Fminputdropdown,
+  FmTree
 ];
 
 export { plugins as default };

package/es/core/ui/components/fmtree/index.vue.d.ts

@@ -0,0 +1,90 @@
+import { TreeKey } from 'element-plus/es/components/tree/src/tree.type';
+import { DefineComponent, ExtractPropTypes, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+import { TreeKey } from 'element-plus';
+declare const _default: DefineComponent<ExtractPropTypes<{
+    checkStrictly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+  * api service name
+  */
+    apiService: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+    * api service 下的方法
+    */
+    apiAction: {
+        type: StringConstructor;
+        default: string;
+    };
+    paras: {
+        type: ObjectConstructor;
+        default: null;
+    };
+    nodeKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    defaultProps: {
+        type: ObjectConstructor;
+        default: {
+            children: string;
+            label: string;
+        };
+    };
+}>, {
+    fetchTreeData: (showLoading?: boolean) => Promise<any>;
+    getCheckedKeys: () => TreeKey[];
+    setCurrentKey: (key?: TreeKey | undefined, shouldAutoExpandParent?: boolean | undefined) => void;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+    "node-click": (...args: any[]) => void;
+}, string, PublicProps, Readonly< ExtractPropTypes<{
+    checkStrictly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+  * api service name
+  */
+    apiService: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+    * api service 下的方法
+    */
+    apiAction: {
+        type: StringConstructor;
+        default: string;
+    };
+    paras: {
+        type: ObjectConstructor;
+        default: null;
+    };
+    nodeKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    defaultProps: {
+        type: ObjectConstructor;
+        default: {
+            children: string;
+            label: string;
+        };
+    };
+}>> & Readonly<{
+    "onNode-click"?: ((...args: any[]) => any) | undefined;
+}>, {
+    apiService: string;
+    apiAction: string;
+    checkStrictly: boolean;
+    paras: Record<string, any>;
+    nodeKey: string;
+    defaultProps: Record<string, any>;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {
+    treeRef: unknown;
+}, any>;
+export default _default;

package/es/core/ui/components/index.d.ts

@@ -1,5 +1,7 @@
 import { elSvg } from './svgIcon';
 import { DefineComponent, ExtractPropTypes, ComponentOptionsMixin, PublicProps, ComponentProvideOptions, PropType } from 'vue';
+import { TreeKey } from 'element-plus';
+import { TreeKey } from 'element-plus/es/components/tree/src/tree.type';
 declare const FmTransfer: DefineComponent<ExtractPropTypes<{
     leftTitle: StringConstructor;
     rightTitle: StringConstructor;
@@ -688,4 +690,78 @@ declare const Fminputdropdown: DefineComponent<ExtractPropTypes<{
     inputWidth: string;
     dropWidth: string;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
-export { FmTransfer, FmNoticeBar, FmDragImg, Fmselect, FmAutocomplete, Fminputdropdown, elSvg };
+declare const FmTree: DefineComponent<ExtractPropTypes<{
+    checkStrictly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    apiService: {
+        type: StringConstructor;
+        default: string;
+    };
+    apiAction: {
+        type: StringConstructor;
+        default: string;
+    };
+    paras: {
+        type: ObjectConstructor;
+        default: null;
+    };
+    nodeKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    defaultProps: {
+        type: ObjectConstructor;
+        default: {
+            children: string;
+            label: string;
+        };
+    };
+}>, {
+    fetchTreeData: (showLoading?: boolean) => Promise<any>;
+    getCheckedKeys: () => TreeKey[];
+    setCurrentKey: (key?: TreeKey | undefined, shouldAutoExpandParent?: boolean | undefined) => void;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+    "node-click": (...args: any[]) => void;
+}, string, PublicProps, Readonly< ExtractPropTypes<{
+    checkStrictly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    apiService: {
+        type: StringConstructor;
+        default: string;
+    };
+    apiAction: {
+        type: StringConstructor;
+        default: string;
+    };
+    paras: {
+        type: ObjectConstructor;
+        default: null;
+    };
+    nodeKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    defaultProps: {
+        type: ObjectConstructor;
+        default: {
+            children: string;
+            label: string;
+        };
+    };
+}>> & Readonly<{
+    "onNode-click"?: ((...args: any[]) => any) | undefined;
+}>, {
+    apiService: string;
+    apiAction: string;
+    checkStrictly: boolean;
+    paras: Record<string, any>;
+    nodeKey: string;
+    defaultProps: Record<string, any>;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {
+    treeRef: unknown;
+}, any>;
+export { FmTransfer, FmNoticeBar, FmDragImg, Fmselect, FmAutocomplete, Fminputdropdown, FmTree, elSvg };

package/es/index.css

@@ -1 +1,3 @@
 .drag_verify[data-v-9e8c9ed2]{background-color:#e8e8e8;overflow:hidden;position:relative;text-align:center}.drag_verify .dv_handler[data-v-9e8c9ed2]{cursor:move;left:0;position:absolute;top:0}.drag_verify .dv_handler i[data-v-9e8c9ed2]{color:#666;font-size:16px;padding-left:0}.drag_verify .dv_handler .el-icon-circle-check[data-v-9e8c9ed2]{color:#6c6;margin-top:9px}.drag_verify .dv_progress_bar[data-v-9e8c9ed2]{height:34px;position:absolute;width:0}.drag_verify .dv_text[data-v-9e8c9ed2]{background:-webkit-gradient(linear,left top,right top,color-stop(0,var(--textColor)),color-stop(.4,var(--textColor)),color-stop(.5,#fff),color-stop(.6,var(--textColor)),color-stop(1,var(--textColor)));-webkit-background-clip:text;color:transparent;position:absolute;top:0;-moz-user-select:none;-webkit-user-select:none;user-select:none;-o-user-select:none;-ms-user-select:none;-webkit-text-fill-color:transparent;-webkit-text-size-adjust:none;animation:slidetounlock 3s infinite}.drag_verify .dv_text[data-v-9e8c9ed2] *{-webkit-text-fill-color:var(--textColor)}.goFirst[data-v-9e8c9ed2]{left:0!important;transition:left .5s}.goOrigin[data-v-9e8c9ed2]{transition:transform .5s}.goKeep[data-v-9e8c9ed2]{transition:left .2s}.goFirst2[data-v-9e8c9ed2]{transition:width .5s;width:0!important}.drag-verify-container[data-v-9e8c9ed2]{border-radius:50%;line-height:0;position:relative}.move-bar[data-v-9e8c9ed2]{position:absolute;z-index:100}.clip-bar[data-v-9e8c9ed2]{background:hsla(0,0%,100%,.8);position:absolute}.refresh[data-v-9e8c9ed2]{cursor:pointer;font-size:20px;position:absolute;right:5px;top:5px;z-index:200}.tips[data-v-9e8c9ed2]{bottom:25px;font-size:12px;height:20px;line-height:20px;position:absolute;text-align:center;width:100%;z-index:200}.tips.success[data-v-9e8c9ed2]{background:hsla(0,0%,100%,.6);color:green}.tips.danger[data-v-9e8c9ed2]{background:rgba(0,0,0,.6);color:#ff0}.check-img[data-v-9e8c9ed2]{border-radius:50%;width:100%}
+
+.box-card[data-v-a783e82e]{flex:1}.box-card[data-v-a783e82e]>.el-card__header{padding:5px}.tree-h-flex[data-v-a783e82e]{align-items:center;display:flex}.tree-h-left[data-v-a783e82e]{flex:1;min-width:0;width:100%}.tree-h-right-group[data-v-a783e82e]{align-items:center;display:flex}

package/es/index.mjs

@@ -3,7 +3,7 @@ export { default as emitter } from './packages/core/utils/emit/index.mjs';
 export { default as setIntroduction } from './packages/core/utils/comm/setIconfont.mjs';
 import './packages/core/index.mjs';
 export { version } from './version.mjs';
-export { FmAutocomplete, FmDragImg, FmNoticeBar, FmTransfer, Fminputdropdown, Fmselect } from './packages/core/ui/components/index.mjs';
+export { FmAutocomplete, FmDragImg, FmNoticeBar, FmTransfer, FmTree, Fminputdropdown, Fmselect } from './packages/core/ui/components/index.mjs';
 export { elSvg } from './packages/core/ui/components/svgIcon/index.mjs';
 export { FmLogin } from './packages/core/ui/login/index.mjs';
 export { NextLoading } from './packages/core/ui/loading/index.mjs';

package/es/packages/core/index.mjs

@@ -1,4 +1,4 @@
-export { FmAutocomplete, FmDragImg, FmNoticeBar, FmTransfer, Fminputdropdown, Fmselect } from './ui/components/index.mjs';
+export { FmAutocomplete, FmDragImg, FmNoticeBar, FmTransfer, FmTree, Fminputdropdown, Fmselect } from './ui/components/index.mjs';
 export { FmLogin } from './ui/login/index.mjs';
 export { NextLoading } from './ui/loading/index.mjs';
 export { AccountTypeEnum, HttpMethodEnum, JobCreateTypeEnum } from './api/index.mjs';

package/es/packages/core/ui/components/fmtree/index.vue.mjs

@@ -0,0 +1,7 @@
+import _sfc_main from './index.vue2.mjs';
+import './index.vue3.mjs';
+import _export_sfc from '../../../../../_virtual/_plugin-vue_export-helper.mjs';
+
+var fmtree = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a783e82e"]]);
+
+export { fmtree as default };

package/es/packages/core/ui/components/fmtree/index.vue2.mjs

@@ -0,0 +1,241 @@
+import { defineComponent, ref, reactive, onMounted, watch, resolveComponent, resolveDirective, createBlock, openBlock, withCtx, withDirectives, createElementBlock, createVNode, createCommentVNode, createTextVNode, toDisplayString, createElementVNode, unref } from 'vue';
+import { Search, MoreFilled } from '@element-plus/icons-vue';
+import { useBaseApi } from '../../../api/base/index.mjs';
+
+const _hoisted_1 = { class: "card-header" };
+const _hoisted_2 = { class: "tree-h-flex" };
+const _hoisted_3 = { class: "tree-h-left" };
+const _hoisted_4 = { class: "tree-h-right-group" };
+const _hoisted_5 = { style: { "margin-bottom": "45px" } };
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "FmTree"
+  },
+  __name: "index",
+  props: {
+    checkStrictly: { type: Boolean, default: true },
+    /**
+    * api service name
+    */
+    apiService: {
+      type: String,
+      default: "planOrder"
+    },
+    /**
+    * api service 下的方法
+    */
+    apiAction: {
+      type: String,
+      default: "autoQuerySearch"
+    },
+    paras: {
+      type: Object,
+      default: null
+    },
+    nodeKey: {
+      type: String,
+      default: "id"
+    },
+    defaultProps: {
+      type: Object,
+      default: { children: "children", label: "name" }
+    }
+  },
+  emits: ["node-click"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const filterText = ref("");
+    const treeRef = ref();
+    const state = reactive({
+      loading: false,
+      folderData: [],
+      isShowCheckbox: false,
+      strictly: false
+    });
+    onMounted(async () => {
+      await fetchTreeData();
+    });
+    watch(filterText, (val) => {
+      treeRef.value.filter(val);
+    });
+    const fetchTreeData = async (showLoading = true) => {
+      if (showLoading) state.loading = true;
+      var res = await useBaseApi(props.apiService).get(props.paras, props.apiAction);
+      state.folderData = res.data.result ?? [];
+      if (showLoading) state.loading = false;
+      return res.data.result ?? [];
+    };
+    const getCheckedKeys = () => {
+      return treeRef.value.getCheckedKeys();
+    };
+    const filterNode = (value, data) => {
+      if (!value) return true;
+      return data.name.includes(value);
+    };
+    const handleCommand = async (command) => {
+      if ("expandAll" == command) {
+        for (let i = 0; i < treeRef.value.store._getAllNodes().length; i++) {
+          treeRef.value.store._getAllNodes()[i].expanded = true;
+        }
+      } else if ("collapseAll" == command) {
+        for (let i = 0; i < treeRef.value.store._getAllNodes().length; i++) {
+          treeRef.value.store._getAllNodes()[i].expanded = false;
+        }
+      } else if ("refresh" == command) {
+        fetchTreeData();
+      } else if ("rootNode" == command) {
+        treeRef.value?.setCurrentKey();
+        emit("node-click", { id: 0, name: "" });
+      }
+    };
+    const emit = __emit;
+    const nodeClick = (node) => {
+      emit("node-click", { id: node.id, name: node.name });
+    };
+    const setCurrentKey = (key, shouldAutoExpandParent) => {
+      treeRef.value?.setCurrentKey(key, shouldAutoExpandParent);
+    };
+    __expose({ fetchTreeData, getCheckedKeys, setCurrentKey });
+    return (_ctx, _cache) => {
+      const _component_el_input = resolveComponent("el-input");
+      const _component_el_icon = resolveComponent("el-icon");
+      const _component_el_button = resolveComponent("el-button");
+      const _component_el_dropdown_item = resolveComponent("el-dropdown-item");
+      const _component_el_dropdown_menu = resolveComponent("el-dropdown-menu");
+      const _component_el_dropdown = resolveComponent("el-dropdown");
+      const _component_el_checkbox = resolveComponent("el-checkbox");
+      const _component_el_tree = resolveComponent("el-tree");
+      const _component_el_scrollbar = resolveComponent("el-scrollbar");
+      const _component_el_card = resolveComponent("el-card");
+      const _directive_loading = resolveDirective("loading");
+      return openBlock(), createBlock(_component_el_card, {
+        class: "box-card",
+        shadow: "hover",
+        "body-style": "height:100%;overflow:auto;padding:5px;width:100%;"
+      }, {
+        header: withCtx(() => [
+          createElementVNode("div", _hoisted_1, [
+            createElementVNode("div", _hoisted_2, [
+              createElementVNode("div", _hoisted_3, [
+                createVNode(_component_el_input, {
+                  "prefix-icon": unref(Search),
+                  modelValue: filterText.value,
+                  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => filterText.value = $event),
+                  modelModifiers: { lazy: true },
+                  clearable: "",
+                  placeholder: "\u7C7B\u578B\u540D\u79F0"
+                }, null, 8, ["prefix-icon", "modelValue"])
+              ]),
+              createElementVNode("div", _hoisted_4, [
+                createVNode(_component_el_dropdown, { onCommand: handleCommand }, {
+                  dropdown: withCtx(() => [
+                    createVNode(_component_el_dropdown_menu, null, {
+                      default: withCtx(() => [
+                        createVNode(_component_el_dropdown_item, { command: "expandAll" }, {
+                          default: withCtx(() => _cache[2] || (_cache[2] = [
+                            createTextVNode("\u5168\u90E8\u5C55\u5F00")
+                          ])),
+                          _: 1,
+                          __: [2]
+                        }),
+                        createVNode(_component_el_dropdown_item, { command: "collapseAll" }, {
+                          default: withCtx(() => _cache[3] || (_cache[3] = [
+                            createTextVNode("\u5168\u90E8\u6298\u53E0")
+                          ])),
+                          _: 1,
+                          __: [3]
+                        }),
+                        createVNode(_component_el_dropdown_item, { command: "rootNode" }, {
+                          default: withCtx(() => _cache[4] || (_cache[4] = [
+                            createTextVNode("\u6839\u8282\u70B9")
+                          ])),
+                          _: 1,
+                          __: [4]
+                        }),
+                        createVNode(_component_el_dropdown_item, { command: "refresh" }, {
+                          default: withCtx(() => _cache[5] || (_cache[5] = [
+                            createTextVNode("\u5237\u65B0")
+                          ])),
+                          _: 1,
+                          __: [5]
+                        })
+                      ]),
+                      _: 1
+                      /* STABLE */
+                    })
+                  ]),
+                  default: withCtx(() => [
+                    createVNode(_component_el_button, { style: { "margin-left": "8px", "width": "34px" } }, {
+                      default: withCtx(() => [
+                        createVNode(_component_el_icon, { class: "el-icon--center" }, {
+                          default: withCtx(() => [
+                            createVNode(unref(MoreFilled))
+                          ]),
+                          _: 1
+                          /* STABLE */
+                        })
+                      ]),
+                      _: 1
+                      /* STABLE */
+                    })
+                  ]),
+                  _: 1
+                  /* STABLE */
+                })
+              ]),
+              !props.checkStrictly && state.isShowCheckbox ? (openBlock(), createBlock(_component_el_checkbox, {
+                key: 0,
+                modelValue: state.strictly,
+                "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => state.strictly = $event),
+                label: "\u8054\u52A8",
+                style: { "margin-left": "8px" },
+                border: ""
+              }, null, 8, ["modelValue"])) : createCommentVNode("v-if", true)
+            ])
+          ])
+        ]),
+        default: withCtx(() => [
+          withDirectives((openBlock(), createElementBlock("div", _hoisted_5, [
+            createVNode(_component_el_scrollbar, null, {
+              default: withCtx(() => [
+                createVNode(_component_el_tree, {
+                  ref_key: "treeRef",
+                  ref: treeRef,
+                  class: "filter-tree",
+                  data: state.folderData,
+                  "node-key": __props.nodeKey,
+                  props: __props.defaultProps,
+                  "filter-node-method": filterNode,
+                  onNodeClick: nodeClick,
+                  "show-checkbox": state.isShowCheckbox,
+                  "default-expand-all": "",
+                  "highlight-current": "",
+                  "check-strictly": !state.strictly
+                }, {
+                  default: withCtx(({ node }) => [
+                    createCommentVNode(' <el-icon v-if="node.level < 4" size="16" style="margin-right: 3px; display: inline; vertical-align: middle"><ele-FolderOpened /></el-icon>\r\n						<el-icon v-else size="16" style="margin-right: 3px; display: inline; vertical-align: middle"><ele-Folder /></el-icon> '),
+                    createTextVNode(
+                      " " + toDisplayString(node.label),
+                      1
+                      /* TEXT */
+                    )
+                  ]),
+                  _: 1
+                  /* STABLE */
+                }, 8, ["data", "node-key", "props", "show-checkbox", "check-strictly"])
+              ]),
+              _: 1
+              /* STABLE */
+            })
+          ])), [
+            [_directive_loading, state.loading]
+          ])
+        ]),
+        _: 1
+        /* STABLE */
+      });
+    };
+  }
+});
+
+export { _sfc_main as default };

package/es/packages/core/ui/components/fmtree/index.vue3.mjs

@@ -0,0 +1,3 @@
+var undefined$1 = undefined;
+
+export { undefined$1 as default };

package/es/packages/core/ui/components/index.mjs

@@ -4,6 +4,7 @@ import dragimg from './dragVerify/dragVerifyImgRotate.vue.mjs';
 import './fmselect/index.vue.mjs';
 import './fmautocomplete/index.vue.mjs';
 import './inputdropdown/index.vue.mjs';
+import fmtree from './fmtree/index.vue.mjs';
 export { elSvg } from './svgIcon/index.mjs';
 import _sfc_main from './transfer/index.vue2.mjs';
 import _sfc_main$1 from './noticeBar/index.vue2.mjs';
@@ -17,5 +18,6 @@ const FmDragImg = dragimg;
 const Fmselect = _sfc_main$2;
 const FmAutocomplete = _sfc_main$3;
 const Fminputdropdown = _sfc_main$4;
+const FmTree = fmtree;
 
-export { FmAutocomplete, FmDragImg, FmNoticeBar, FmTransfer, Fminputdropdown, Fmselect };
+export { FmAutocomplete, FmDragImg, FmNoticeBar, FmTransfer, FmTree, Fminputdropdown, Fmselect };

package/index.css

@@ -111,3 +111,30 @@
 }
 
 
+
+
+.box-card[data-v-a783e82e] {
+	flex: 1;
+}
+.box-card[data-v-a783e82e]> .el-card__header {
+	padding: 5px;
+}
+.tree-h-flex[data-v-a783e82e] {
+  display: flex;
+  align-items: center; /* 纵向居中 */
+}
+.tree-h-left[data-v-a783e82e] {
+  flex: 1;
+  min-width: 0; /* 防止内容溢出 */
+  width: 100%;
+}
+.tree-h-right-group[data-v-a783e82e] {
+  display: flex;
+  align-items: center;
+}
+
+
+/* .tree-h-right {
+	width: 42px;
+	min-width: 42px;
+} */