@web-utils/component 2.0.13 → 2.2.0

package/fy-tree/index.mjs

@@ -0,0 +1,433 @@
+import { s as d, o as l, a as r } from "../chunks/util.C2Bhx22L.mjs";
+import { p as u } from "../chunks/permission.E9kZbW48.mjs";
+import { isBlank as p } from "@web-utils/core";
+import { n as f } from "../chunks/vueComponentNormalizer.JwmUNtgn.mjs";
+var m = function() {
+  var e = this, i = e.$createElement, t = e._self._c || i;
+  return t("div", {
+    staticClass: "avue-tree"
+  }, [e.optVal(e.option.filter, !0) ? t("div", {
+    staticClass: "avue-tree__filter"
+  }, [t("ElInput", {
+    attrs: {
+      placeholder: e.optVal(e.option.filterText, "输入关键字进行过滤"),
+      size: e.size
+    },
+    model: {
+      value: e.filterValue,
+      callback: function(n) {
+        e.filterValue = n;
+      },
+      expression: "filterValue"
+    }
+  }), e.optVal(e.option.addBtn, !0) ? t("ElButton", {
+    directives: [{
+      name: "permission",
+      rawName: "v-permission",
+      value: e.getPermission("addBtn"),
+      expression: "getPermission('addBtn')"
+    }],
+    attrs: {
+      size: e.size,
+      icon: "el-icon-plus"
+    },
+    on: {
+      click: e.parentAdd
+    }
+  }) : e._t("addBtn")], 2) : e._e(), t("ElScrollbar", {
+    staticClass: "avue-tree__content"
+  }, [t("ElTree", {
+    directives: [{
+      name: "loading",
+      rawName: "v-loading",
+      value: e.loading,
+      expression: "loading"
+    }],
+    ref: "tree",
+    attrs: {
+      data: e.data,
+      lazy: e.lazy,
+      load: e.treeLoad,
+      props: e.treeProps,
+      "icon-class": e.iconClass,
+      indent: e.indent,
+      "highlight-current": !e.multiple,
+      "show-checkbox": e.multiple,
+      accordion: e.accordion,
+      "node-key": e.valueKey,
+      "check-strictly": e.checkStrictly,
+      "check-on-click-node": e.checkOnClickNode,
+      "filter-node-method": e.filterNode,
+      "expand-on-click-node": e.expandOnClickNode,
+      "default-expand-all": e.defaultExpandAll,
+      "default-expanded-keys": e.defaultExpandedKeys
+    },
+    on: {
+      "check-change": e.handleCheckChange,
+      "node-click": e.nodeClick,
+      "node-contextmenu": e.nodeContextmenu
+    },
+    scopedSlots: e._u([{
+      key: "default",
+      fn: function(n) {
+        var o = n.node, s = n.data;
+        return [e._t("default", function() {
+          return [t("span", {
+            staticClass: "el-tree-node__label"
+          }, [t("span", [e._v(e._s(o.label))])])];
+        }, {
+          node: o,
+          data: s
+        })];
+      }
+    }], null, !0)
+  })], 1), e.client.show && e.menu ? t("div", {
+    staticClass: "el-cascader-panel is-bordered avue-tree__menu",
+    style: e.styleName,
+    on: {
+      click: function(n) {
+        e.client.show = !1;
+      }
+    }
+  }, [e.optVal(e.option.addBtn, !0) ? t("div", {
+    directives: [{
+      name: "permission",
+      rawName: "v-permission",
+      value: e.getPermission("addBtn"),
+      expression: "getPermission('addBtn')"
+    }],
+    staticClass: "avue-tree__item",
+    on: {
+      click: e.rowAdd
+    }
+  }, [e._v(" " + e._s(e.menuIcon("addBtn")) + " ")]) : e._e(), e.optVal(e.option.editBtn, !0) ? t("div", {
+    directives: [{
+      name: "permission",
+      rawName: "v-permission",
+      value: e.getPermission("editBtn"),
+      expression: "getPermission('editBtn')"
+    }],
+    staticClass: "avue-tree__item",
+    on: {
+      click: e.rowEdit
+    }
+  }, [e._v(" " + e._s(e.menuIcon("editBtn")) + " ")]) : e._e(), e.optVal(e.option.delBtn, !0) ? t("div", {
+    directives: [{
+      name: "permission",
+      rawName: "v-permission",
+      value: e.getPermission("delBtn"),
+      expression: "getPermission('delBtn')"
+    }],
+    staticClass: "avue-tree__item",
+    on: {
+      click: e.rowRemove
+    }
+  }, [e._v(" " + e._s(e.menuIcon("delBtn")) + " ")]) : e._e(), e._t("menu", null, {
+    node: e.node
+  })], 2) : e._e(), e.box ? t("div", [t("ElementDialog", {
+    attrs: {
+      title: e.node[e.labelKey] || e.title,
+      visible: e.box,
+      "before-close": e.hide,
+      width: e.optVal(e.option.dialogWidth, "50%")
+    },
+    on: {
+      "update:visible": function(n) {
+        e.box = n;
+      }
+    }
+  }, [t("FyForm", {
+    ref: "form",
+    attrs: {
+      option: e.formOption
+    },
+    on: {
+      submit: e.handleSubmit
+    },
+    model: {
+      value: e.form,
+      callback: function(n) {
+        e.form = n;
+      },
+      expression: "form"
+    }
+  })], 1)], 1) : e._e()], 1);
+}, y = [];
+const v = {
+  name: "FyTree",
+  directives: {
+    permission: u
+  },
+  props: {
+    indent: Number,
+    filterNodeMethod: Function,
+    checkOnClickNode: Boolean,
+    beforeClose: Function,
+    beforeOpen: Function,
+    permission: {
+      type: [Function, Object],
+      default: () => ({})
+    },
+    iconClass: {
+      type: String
+    },
+    loading: {
+      type: Boolean,
+      default: !1
+    },
+    expandOnClickNode: {
+      type: Boolean,
+      default: !1
+    },
+    option: {
+      type: Object,
+      default: () => ({})
+    },
+    data: {
+      type: Array,
+      default: () => []
+    },
+    value: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      filterValue: "",
+      client: {
+        x: 0,
+        y: 0,
+        show: !1
+      },
+      box: !1,
+      type: "",
+      node: {},
+      form: {}
+    };
+  },
+  computed: {
+    styleName() {
+      return {
+        top: d(this.client.y - 10),
+        left: d(this.client.x - 10)
+      };
+    },
+    treeProps() {
+      return Object.assign(this.props, {
+        isLeaf: this.leafKey
+      });
+    },
+    menu() {
+      return l(this.option.menu, !0);
+    },
+    title() {
+      return this.option.title || "添加";
+    },
+    treeLoad() {
+      return this.option.treeLoad;
+    },
+    checkStrictly() {
+      return this.option.checkStrictly;
+    },
+    accordion() {
+      return this.option.accordion;
+    },
+    multiple() {
+      return this.option.multiple;
+    },
+    lazy() {
+      return this.option.lazy;
+    },
+    addText() {
+      return this.addFlag ? this.menuIcon("addBtn") : this.menuIcon("updateBtn");
+    },
+    addFlag() {
+      return ["add", "parentAdd"].includes(this.type);
+    },
+    size() {
+      return this.option.size || "small";
+    },
+    props() {
+      return this.option.props || {};
+    },
+    leafKey() {
+      return this.props.leaf || r.leaf;
+    },
+    valueKey() {
+      return this.props.value || r.value;
+    },
+    labelKey() {
+      return this.props.label || r.label;
+    },
+    childrenKey() {
+      return this.props.children || r.children;
+    },
+    nodeKey() {
+      return this.option.nodeKey || r.nodeKey;
+    },
+    defaultExpandAll() {
+      return this.option.defaultExpandAll;
+    },
+    defaultExpandedKeys() {
+      return this.option.defaultExpandedKeys;
+    },
+    formOption() {
+      return Object.assign(
+        this.option.formOption || {},
+        {
+          submitText: this.addText
+        }
+      );
+    }
+  },
+  watch: {
+    filterValue(e) {
+      this.$refs.tree.filter(e);
+    },
+    value(e) {
+      this.form = e;
+    },
+    form(e) {
+      this.$emit("input", e), this.$emit("change", e);
+    }
+  },
+  mounted() {
+    document.addEventListener("click", this.hideClient), this.$once("hook:beforeDestroy", () => {
+      document.removeEventListener("click", this.hideClient);
+    }), this.initFun();
+  },
+  methods: {
+    optVal: l,
+    hideClient(e) {
+      this.$el.contains(e.target) || (this.client.show = !1);
+    },
+    menuIcon(e) {
+      return l(this.option[`${e}Text`], e);
+    },
+    getPermission(e) {
+      return typeof this.permission == "function" ? this.permission(e, this.node.data || {}) : p(this.permission[e]) ? !0 : this.permission[e];
+    },
+    initFun() {
+      [
+        "filter",
+        "updateKeyChildren",
+        "getCheckedNodes",
+        "setCheckedNodes",
+        "getCheckedKeys",
+        "setCheckedKeys",
+        "setChecked",
+        "getHalfCheckedNodes",
+        "getHalfCheckedKeys",
+        "getCurrentKey",
+        "getCurrentNode",
+        "setCurrentKey",
+        "setCurrentNode",
+        "getNode",
+        "remove",
+        "append",
+        "insertBefore",
+        "insertAfter"
+      ].forEach((e) => {
+        this[e] = this.$refs.tree[e];
+      });
+    },
+    nodeContextmenu(e, i, t) {
+      this.node = t, this.client.x = e.clientX, this.client.y = e.clientY, this.client.show = !0;
+    },
+    handleCheckChange(e, i, t) {
+      this.$emit("check-change", e, i, t);
+    },
+    handleSubmit(e, i) {
+      this.addFlag ? this.save(e, i) : this.update(e, i);
+    },
+    nodeClick(e, i, t) {
+      this.client.show = !1, this.$emit("node-click", e, i, t);
+    },
+    filterNode(e, i) {
+      return typeof this.filterNodeMethod == "function" ? this.filterNodeMethod(e, i) : e ? i[this.labelKey].indexOf(e) !== -1 : !0;
+    },
+    hide(e) {
+      const i = () => {
+        e && e(), this.node = {}, this.form = {}, this.box = !1;
+      };
+      typeof this.beforeClose == "function" ? this.beforeClose(i, this.type) : i();
+    },
+    save(e, i) {
+      const t = (n) => {
+        n = n || this.form, this.type === "add" ? this.$refs.tree.append(n, this.node.data[this.valueKey]) : this.type === "parentAdd" && this.$refs.tree.append(n), this.hide(), i();
+      };
+      this.$emit("save", this.node, e, t, i);
+    },
+    update(e, i) {
+      const t = (n) => {
+        n = n || this.form;
+        const o = n[this.valueKey];
+        this.node.data = this.form;
+        const { parentList: s, index: a } = this.findData(o);
+        if (s) {
+          const h = s.splice(a, 1)[0];
+          n[this.childrenKey] = h[this.childrenKey], s.splice(a, 0, n);
+        }
+        this.hide(), i();
+      };
+      this.$emit("update", this.node, e, t, i);
+    },
+    rowEdit() {
+      this.type = "edit", this.form = this.node.data, this.show();
+    },
+    parentAdd() {
+      this.type = "parentAdd", this.show();
+    },
+    rowAdd() {
+      this.type = "add", this.show();
+    },
+    show() {
+      const e = () => {
+        this.client.show = !1, this.box = !0;
+      };
+      typeof this.beforeOpen == "function" ? this.beforeOpen(e, this.type) : e();
+    },
+    rowRemove() {
+      this.client.show = !1;
+      const e = () => {
+        this.$refs.tree.remove(this.node.data[this.valueKey]);
+      };
+      this.$emit("del", this.node, e);
+    },
+    findData(e) {
+      let i = {};
+      const t = (n, o) => {
+        n.forEach((s, a) => {
+          s[this.valueKey] === e && (i = {
+            item: s,
+            index: a,
+            parentList: n,
+            parent: o
+          }), s[this.childrenKey] && t(s[this.childrenKey], s);
+        });
+      };
+      return t(this.data), i;
+    }
+  }
+}, c = {};
+var _ = /* @__PURE__ */ f(
+  v,
+  m,
+  y,
+  !1,
+  k,
+  null,
+  null,
+  null
+);
+function k(e) {
+  for (let i in c)
+    this[i] = c[i];
+}
+const K = /* @__PURE__ */ function() {
+  return _.exports;
+}();
+export {
+  K as default
+};

package/fy-tree/style.css

@@ -0,0 +1 @@
+.avue-tree{height:100%;position:relative}.avue-tree__menu{z-index:1024;background-color:#fff;flex-wrap:wrap;width:200px;position:fixed}.avue-tree__dialog .el-dialog__body{padding:30px 20px 0}.avue-tree__item{color:#666;white-space:nowrap;text-overflow:ellipsis;outline:none;width:100%;height:34px;padding:0 10px;line-height:34px;position:relative;overflow:hidden}.avue-tree__item:hover{color:#409eff;cursor:pointer}.avue-tree__filter{align-items:center;margin-bottom:5px;display:flex}.avue-tree__content{height:calc(100% - 32px);padding:5px 0}