@web-utils/component 2.7.36 → 2.7.37

package/dist/components/fy-tree/index.mjs

@@ -0,0 +1,428 @@
+import { s as d, o as l, D as r } from "../../chunks/util.eca708b6.mjs";
+import { p as u } from "../../chunks/permission.ce5d2121.mjs";
+import { isBlank as p } from "@web-utils/core";
+import { n as f } from "../../chunks/vueComponentNormalizer.446f5dc4.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.$scopedSlots.default ? e._t("default", null, {
+          node: o,
+          data: s
+        }) : t("span", {
+          staticClass: "el-tree-node__label"
+        }, [t("span", [e._v(e._s(o.label))])]);
+      }
+    }], 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", (e) => {
+      this.$el.contains(e.target) || (this.client.show = !1);
+    }), this.initFun();
+  },
+  methods: {
+    optVal: l,
+    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/dist/components/fy-tree/style.css

@@ -1,46 +1 @@
-/* 全局公共颜色配置 */ /* 全局公共尺寸配置 */
-/* 应用头部高度 */
-/* 页面宽度 */
-/* 侧栏宽度 */
-/* 标签高度 */
-/* 页面头部工具条高度 */
-.avue-tree {
-  position: relative;
-  height: 100%;
-}
-.avue-tree__menu {
-  width: 200px;
-  position: fixed;
-  z-index: 1024;
-  flex-wrap: wrap;
-  background-color: #fff;
-}
-.avue-tree__dialog .el-dialog__body {
-  padding: 30px 20px 0 20px;
-}
-.avue-tree__item {
-  position: relative;
-  padding: 0 30px 0 20px;
-  height: 34px;
-  line-height: 34px;
-  outline: none;
-  padding: 0 10px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  width: 100%;
-  color: #666;
-}
-.avue-tree__item:hover {
-  cursor: pointer;
-  color: #409eff;
-}
-.avue-tree__filter {
-  margin-bottom: 5px;
-  display: flex;
-  align-items: center;
-}
-.avue-tree__content {
-  padding: 5px 0;
-  height: calc(100% - 32px);
-}
+.avue-tree{position:relative;height:100%}.avue-tree__menu{width:200px;position:fixed;z-index:1024;flex-wrap:wrap;background-color:#fff}.avue-tree__dialog .el-dialog__body{padding:30px 20px 0}.avue-tree__item{position:relative;height:34px;line-height:34px;outline:none;padding:0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;color:#666}.avue-tree__item:hover{cursor:pointer;color:#409eff}.avue-tree__filter{margin-bottom:5px;display:flex;align-items:center}.avue-tree__content{padding:5px 0;height:calc(100% - 32px)}