el-tree-transfer-vue3/dist/el-tree-transfer-vue3.es.ts

## 简介 v1.0.0 el-tree-fransfer-vue3 是一个基于 VUE3 和 elementPlus 的树形穿梭框组件，使用前请确认已经引入[element-plus](https://element-plus.org/zh-CN/guide/installation.html)！ 此组件功能类似于`element-plus`的[transfer](https://element-plus.org/zh-CN/component/transfer.html)组件，但是里面的数据是树形结构

import { defineComponent as R, ref as m, watch as N, resolveComponent as _, openBlock as q, createElementBlock as G, normalizeStyle as J, createElementVNode as h, createVNode as p, toDisplayString as F, withCtx as A, createTextVNode as B } from "vue";
const K = {
  width: {
    type: String,
    defaulte: "100%"
  },
  height: {
    type: String,
    defaulte: "320px"
  },
  from_title: {
    type: String
  },
  to_title: {
    type: String
  },
  from_data: {
    type: Array,
    default: []
  },
  to_data: {
    type: Array,
    default: []
  },
  defaultProps: {
    type: Object,
    default: () => ({ label: "label", children: "children" })
  },
  // el-tree node-key 必须唯一
  node_key: {
    type: String,
    default: "id"
  }
};
function f(e) {
  for (var t = 0; t < e.length; t++)
    if (e[t].children != null) {
      var l = e[t].children;
      delete e[t].children;
      for (var o = 0; o < l.length; o++)
        e.push(l[o]);
    }
  return $(e, "id");
}
function D(e, t) {
  let l = [];
  return e.forEach((o) => {
    o.pid === t && o.children.length > 0 && (o.children = []), l.push(o);
  }), l;
}
function s(e) {
  let t;
  try {
    t = e.push ? [] : {};
  } catch {
    t = {};
  }
  for (let l in e)
    typeof e[l] == "object" ? t[l] = s(e[l]) : t[l] = e[l];
  return t;
}
function b(e, t) {
  const l = f([...e, ...t]);
  return L($(l, "id"), 0);
}
function T(e, t) {
  const l = t.map((o) => {
    if (o.pid !== 0)
      return o.id;
  });
  return console.error(l), e = e.filter(function(o) {
    return l.indexOf(o.id) == -1;
  }), b(e, []);
}
function L(e, t) {
  let l = [];
  if (e && e.length > 0) {
    for (let o of e)
      if (o.pid == t) {
        let a = {}, d = V(o.id, e);
        d && d.length > 0 && (a.children = d), a = Object.assign(o, a), l.push(a);
      }
  }
  return l;
}
function V(e, t) {
  let l = [];
  if (t && t.length > 0) {
    for (let o of t)
      if (o.pid == e) {
        let a = {}, d = V(o.id, t);
        d && d.length > 0 && (a.children = d), a = Object.assign(o, a), l.push(a);
      }
  }
  return l;
}
function $(e, t) {
  let l = {}, o = [];
  for (let a = 0; a < e.length; a++) {
    const d = e[a];
    l[d[t]] || (l[d[t]] = o.push(d));
  }
  return o;
}
const M = R({
  name: "el-tree-transfer",
  props: K,
  setup(e, { emit: t }) {
    const l = m(), o = m(), a = m(""), d = m(""), i = m([]), u = m([]), v = m(!1), g = m(!1), C = m(!1), c = m(!1), w = () => {
      if (C.value)
        t("addBtn", []), t("removeBtn", b(e.from_data, e.to_data));
      else {
        const n = b(s(i.value), f(s(e.to_data)));
        t("removeBtn", n), console.log(n);
        const r = T(f(s(e.from_data)), f(s(i.value)));
        let k = [];
        r.filter((y) => y.children == null || !y.children ? void 0 : k.push(y)), t("addBtn", k);
      }
      i.value = [];
    }, E = () => {
      if (c.value)
        t("removeBtn", []), t("addBtn", b(e.from_data, e.to_data));
      else {
        const n = b(s(u.value), f(s(e.from_data)));
        t("addBtn", n), console.log(n);
        const r = T(f(s(e.to_data)), f(s(u.value)));
        let k = [];
        r.filter((y) => y.children == null || !y.children ? void 0 : k.push(y)), t("removeBtn", k);
      }
      u.value = [];
    }, H = (n) => {
      console.log(n);
    }, O = (n) => {
      console.log(n);
    }, S = (n) => {
      if (n) {
        l.value.setCheckedNodes(e.from_data, !1);
        const r = l.value.getCheckedNodes(!1, !1), k = D(s(r), 0);
        i.value = f(k);
      } else {
        l.value.setCheckedNodes([], !1);
        const r = l.value.getCheckedNodes(!1, !1);
        i.value = r;
      }
    }, j = (n) => {
      if (n) {
        o.value.setCheckedNodes(e.to_data, !1);
        const r = o.value.getCheckedNodes(!1, !1), k = D(s(r), 0);
        u.value = k;
      } else {
        o.value.setCheckedNodes([], !1);
        const r = o.value.getCheckedNodes(!1, !1);
        u.value = r;
      }
    }, I = () => {
      const n = l.value.getCheckedNodes(!1, !0), r = D(s(n), 0);
      i.value = f(r), console.error(i.value);
    }, P = () => {
      const n = o.value.getCheckedNodes(!1, !0), r = D(s(n), 0);
      u.value = f(r);
    }, U = (n, r) => (console.log(n, r), n ? r.label.indexOf(n) !== -1 : !0), z = (n, r) => n ? r.label.indexOf(n) !== -1 : !0;
    return N(() => i.value, () => {
      const n = f(s(e.from_data)), r = s(i.value);
      n.length === r.length && (C.value = !0, v.value = !1), r.length > 0 && n.length > r.length && (v.value = !0), r.length === 0 && (C.value = !1, v.value = !1);
    }), N(() => u.value, () => {
      const n = f(s(e.to_data)), r = s(u.value);
      n.length === r.length && (c.value = !0, g.value = !1), r.length > 0 && n.length > r.length && (g.value = !0), r.length === 0 && (g.value = !1, c.value = !1);
    }), N(() => a.value, (n) => {
      l.value.filter(n);
    }), N(() => d.value, (n) => {
      o.value.filter(n);
    }), {
      fromChekAll: C,
      toChekAll: c,
      fromtree: l,
      totree: o,
      fromFilterText: a,
      toFilterText: d,
      isFromIndeterminate: v,
      isToIndeterminate: g,
      checkAllFromDataCache: i,
      checkAllToDataCache: u,
      fromCheck: I,
      toCheck: P,
      add: w,
      remove: E,
      fromHandleCheckAllChange: S,
      toHandleCheckAllChange: j,
      fromHandleNodeClick: H,
      toHandleNodeClick: O,
      fromFilterNode: U,
      toFilterNode: z
    };
  }
}), Q = (e, t) => {
  const l = e.__vccOpts || e;
  for (const [o, a] of t)
    l[o] = a;
  return l;
}, W = { class: "transfer-left" }, X = { class: "transfer-left-title" }, Y = { class: "transfer-left-content" }, Z = { class: "transfer-button" }, x = { class: "transfer-button-add" }, ee = { class: "transfer-button-remove" }, te = { class: "transfer-right" }, le = { class: "transfer-right-title" }, oe = { class: "transfer-right-content" };
function ne(e, t, l, o, a, d) {
  const i = _("el-checkbox"), u = _("el-input"), v = _("el-tree"), g = _("el-scrollbar"), C = _("el-button");
  return q(), G("div", {
    class: "mint-transfer transfer",
    style: J({ width: e.width, height: e.height })
  }, [
    h("div", W, [
      h("div", X, [
        p(i, {
          modelValue: e.fromChekAll,
          "onUpdate:modelValue": t[0] || (t[0] = (c) => e.fromChekAll = c),
          indeterminate: e.isFromIndeterminate,
          onChange: e.fromHandleCheckAllChange
        }, null, 8, ["modelValue", "indeterminate", "onChange"]),
        h("span", null, F(e.$props.from_title || ""), 1)
      ]),
      h("div", Y, [
        p(g, { height: "100%" }, {
          default: A(() => [
            p(u, {
              class: "transfer-input",
              modelValue: e.fromFilterText,
              "onUpdate:modelValue": t[1] || (t[1] = (c) => e.fromFilterText = c),
              placeholder: "输入关键字进行过滤",
              clearable: ""
            }, null, 8, ["modelValue"]),
            p(v, {
              style: { "padding-left": "10px" },
              data: e.$props.from_data,
              props: e.$props.defaultProps,
              "show-checkbox": "",
              "node-key": e.$props.node_key,
              "current-node-key": "current",
              ref: "fromtree",
              onCheck: e.fromCheck,
              "filter-node-method": e.fromFilterNode,
              onNodeClick: e.fromHandleNodeClick
            }, null, 8, ["data", "props", "node-key", "onCheck", "filter-node-method", "onNodeClick"])
          ]),
          _: 1
        })
      ])
    ]),
    h("div", Z, [
      h("div", x, [
        p(C, {
          size: "small",
          type: "primary",
          disabled: !(e.checkAllFromDataCache.length > 0),
          onClick: e.add
        }, {
          default: A(() => [
            B(F("添加"))
          ]),
          _: 1
        }, 8, ["disabled", "onClick"])
      ]),
      h("div", ee, [
        p(C, {
          size: "small",
          type: "primary",
          disabled: !(e.checkAllToDataCache.length > 0),
          onClick: e.remove
        }, {
          default: A(() => [
            B(F("移除"))
          ]),
          _: 1
        }, 8, ["disabled", "onClick"])
      ])
    ]),
    h("div", te, [
      h("div", le, [
        p(i, {
          modelValue: e.toChekAll,
          "onUpdate:modelValue": t[2] || (t[2] = (c) => e.toChekAll = c),
          indeterminate: e.isToIndeterminate,
          onChange: e.toHandleCheckAllChange
        }, null, 8, ["modelValue", "indeterminate", "onChange"]),
        h("span", null, F(e.$props.to_title || ""), 1)
      ]),
      h("div", oe, [
        p(g, { height: "100%" }, {
          default: A(() => [
            p(u, {
              class: "transfer-input",
              modelValue: e.toFilterText,
              "onUpdate:modelValue": t[3] || (t[3] = (c) => e.toFilterText = c),
              placeholder: "输入关键字进行过滤",
              clearable: ""
            }, null, 8, ["modelValue"]),
            p(v, {
              style: { "padding-left": "10px" },
              data: e.$props.to_data,
              props: e.$props.defaultProps,
              "show-checkbox": "",
              "node-key": e.$props.node_key,
              ref: "totree",
              onCheck: e.toCheck,
              "filter-node-method": e.toFilterNode,
              onNodeClick: e.toHandleNodeClick
            }, null, 8, ["data", "props", "node-key", "onCheck", "filter-node-method", "onNodeClick"])
          ]),
          _: 1
        })
      ])
    ])
  ], 4);
}
const ae = /* @__PURE__ */ Q(M, [["render", ne]]);
export {
  ae as default
};