tdesign-pro-component/dist/es/ProTable-CynNJupM.js

ProComponents tdesign-vue-next + Vue3 + TS

import "lodash-es";
import { g as y, w as X } from "./utils-CIySOLoe.js";
import { defineComponent as k, ref as f, computed as x, createVNode as n, createTextVNode as q, onMounted as G, resolveComponent as L, watch as H, Fragment as $, withDirectives as Q, resolveDirective as Y, mergeProps as Z } from "vue";
import { Card as M, Space as O, Button as N, Icon as ee, Table as te, Pagination as ae } from "tdesign-vue-next";
import { P as ne } from "./ProForm-DjsHJ5ab.js";
import "./ProTableBuilder-DjvvFeRB.js";
const le = /* @__PURE__ */ k((e, {
  emit: l,
  slots: t,
  expose: F
}) => {
  const v = f(), R = y("formHeader", t, e), S = x(() => {
    var o;
    return ((o = e.options) == null ? void 0 : o.filter((g) => !g.hidden)) || [];
  }), D = e.showNum;
  let T = {};
  const s = f(!1), A = x(() => s.value ? S.value : S.value.slice(0, D)), m = x(() => S.value.length > D), i = () => {
    var o;
    s.value = !s.value, s.value && ((o = v.value) == null || o.resetRequest());
  };
  async function r(o) {
    return l("search", o), !0;
  }
  function d(o, g) {
    T[o] = g;
  }
  async function b() {
    return T;
  }
  function w() {
    var o;
    T = {}, (o = v.value) == null || o.reset(), e.onReset && e.onReset();
  }
  return F({
    getSearchValue: () => {
      var o;
      return (o = v.value) == null ? void 0 : o.getFormValue();
    },
    reset: w,
    resetForm: () => {
      var o;
      return (o = v.value) == null ? void 0 : o.reset();
    }
  }), () => n(M, {
    bordered: e.bordered
  }, {
    default: () => [R() && R(), n(ne, {
      ref: v,
      request: b,
      onSubmit: r,
      gap: 16,
      filterEmptyStr: !0,
      filterEmptyArray: !0,
      options: A.value,
      hideFooter: !0,
      onChange: d,
      footer: () => n("div", {
        style: "display: flex; justify-content: flex-end; width: 100%;"
      }, [n(O, null, {
        default: () => [n(N, {
          onClick: w,
          theme: "default",
          variant: "outline"
        }, {
          default: () => [q("重置")]
        }), n(N, {
          loading: e.loading,
          type: "submit"
        }, {
          default: () => [q("查询")]
        }), m.value && n(N, {
          variant: "text",
          onClick: i
        }, {
          default: () => [n("div", {
            style: "display: flex; align-items: center;"
          }, [s.value ? "收起" : "展开", n(ee, {
            name: s.value ? "chevron-up" : "chevron-down"
          }, null)])]
        })]
      })])
    }, null)]
  });
}, {
  name: "ProTableHeader",
  emit: ["search"],
  props: {
    formProps: Object,
    options: Array,
    cardProps: Object,
    showNum: {
      type: Number,
      default: 3
    },
    formHeader: [String, Object, Function],
    loading: Boolean,
    onReset: Function
  }
}), oe = (e) => {
  const l = [];
  return e.forEach((t) => {
    l.push({
      name: t.key,
      label: typeof t.title == "string" ? t.title : t.title.formTitle,
      type: t.type,
      span: t.span || 3,
      hidden: t.hideInSearch,
      placeholder: t.placeholder,
      data: t.data || []
    });
  }), l;
}, ie = (e) => {
  const l = [];
  return e.forEach((t) => {
    const F = {
      ...t.tableColumnsProps,
      foot: t.footer,
      colKey: t.key,
      title: typeof t.title == "string" ? t.title : t.title.tableTitle,
      ellipsis: t.ellipsis,
      ellipsisTitle: t.ellipsisTitle,
      fixed: t.fixed,
      sorter: t.sorter,
      width: t.width,
      render: t.titleRender,
      type: t.tableType
    };
    t.render && (F.cell = (v, { row: R, rowIndex: S }) => t.render(R, S)), l.push(F);
  }), l;
}, re = /* @__PURE__ */ k((e, {
  slots: l,
  emit: t,
  expose: F
}) => {
  var V, z;
  const v = y("empty", l, e), R = (a) => y("expanedRow", l, e, a)(), S = (a, u) => y(`table-${u}`, l, e, a)(), D = y("actions", l, e), T = y("footerActions", l, e), s = y("title", l, e), A = f([]), m = f(!1), i = f([]), r = f({
    pageNum: 1,
    pageSize: 10,
    total: 0
  }), d = f([]), b = f(), w = f([]), o = x(() => d.value.filter((a) => w.value.includes(a[e.rowKey]))), g = y("dataActions", l, e), U = x(() => {
    const a = {};
    return i.value.map((u) => u.colKey).forEach((u) => {
      a[u] = e[`table-${u}`] || l[`table-${u}`] ? (p) => S(p, u) : void 0;
    }), a;
  }), _ = x(() => A.value.filter((a) => a.hidden).length == A.value.length);
  G(() => {
    B(), j(), E();
  });
  function B() {
    A.value = oe(e.options || []);
  }
  function j() {
    i.value = ie(e.options.filter((h) => !h.hideInTable) || []), p(), u(), a();
    function a() {
      i.value.filter((h) => h.colKey === "drag").length > 0 || e.dragAble && i.value.unshift({
        colKey: "drag",
        cell: () => n("span", null, [n(L("t-icon"), {
          name: "move"
        }, null)]),
        width: 46
      });
    }
    function u() {
      i.value.filter((h) => h.colKey === "row-select").length > 0 || e.selectAble && i.value.unshift({
        colKey: "row-select",
        type: e.selectType,
        width: 46
      });
    }
    function p() {
      e.editAble && (i.value = i.value.map((h) => {
        const c = e.options.find((C) => h.colKey == C.key);
        return {
          ...h,
          edit: {
            ...c.edit ? c.edit : {},
            onEdited: (C) => {
              if (c && c.edit) {
                let I = function() {
                  const P = [...d.value];
                  P.splice(C.rowIndex, 1, C.newRowData), d.value = P, c.edit.onEditSuccess && c.edit.onEditSuccess(C);
                };
                c.edit.beforeEdit ? c.edit.beforeEdit().then(() => {
                  I();
                }).catch((P) => {
                  c.edit && c.edit.onEditFail && c.edit.onEditFail(P);
                }) : I();
              }
            }
          }
        };
      }));
    }
  }
  function J(a) {
    w.value = a;
  }
  function K() {
    r.value.pageNum = 1, E();
  }
  function E() {
    e.request && (m.value = !0, e.request({
      form: b.value ? b.value.getSearchValue() : {},
      pageNum: r.value.pageNum,
      pageSize: r.value.pageSize
    }).then((a) => {
      a.success !== !1 && (d.value = a.list || [], r.value.total = a.total);
    }).catch(() => {
    }).finally(() => {
      m.value = !1;
    }));
  }
  const W = (a) => {
    const {
      newData: u,
      sort: p
    } = a;
    e.dragHandler ? p === "col" ? i.value = e.dragHandler(a) : d.value = e.dragHandler(a) : p === "col" ? i.value = u : d.value = u;
  };
  return H(() => r.value.pageNum, () => {
    E();
  }), H(() => r.value.pageSize, () => {
    E();
  }), H(w, (a) => {
    t("update:selectData", a);
  }), H(() => e.selectData, (a) => {
    w.value = e.selectData || [];
  }), H(() => e.options, () => {
    j(), B();
  }, {
    deep: !0
  }), F({
    reload: (V = b.value) == null ? void 0 : V.reset,
    getTableData: () => d,
    reset: E,
    getFormValue: (z = b.value) == null ? void 0 : z.getSearchValue
  }), () => n($, null, [!_.value && !e.hideForm && n("div", {
    style: "margin-bottom: 16px;"
  }, [n(le, {
    bordered: e.bordered,
    formHeader: e.formHeader,
    ref: b,
    loading: m.value,
    onSearch: K,
    onReset: K,
    options: A.value
  }, null)]), n(M, {
    bordered: e.bordered
  }, {
    title: s() ? s() : void 0,
    actions: D() ? D() : void 0,
    default: () => n($, null, [n("div", {
      style: "display: flex; margin-bottom: 16px;"
    }, [g() && e.dataActionsAlign === "left" && n("div", null, [g()]), n("div", null, [l.card ? Q(n("div", {
      style: "width: 100%;"
    }, [l.card({
      list: d.value
    })]), [[Y("loading"), m.value]]) : n(te, Z({
      onSelectChange: J,
      onDragSort: W,
      "drag-sort": e.dragType,
      loading: m.value,
      data: d.value,
      columns: i.value
    }, e.tableProps), {
      empty: v(),
      expandedRow: e.expanedRow || l.expanedRow ? R : void 0,
      ...l,
      ...U.value
    }), T() && n("div", null, [T()])]), g() && e.dataActionsAlign === "right" && n("div", null, [g({
      data: o.value
    })])]), !e.hideFooter && n("div", null, [n(ae, {
      modelValue: r.value.pageNum,
      "onUpdate:modelValue": (a) => r.value.pageNum = a,
      pageSize: r.value.pageSize,
      "onUpdate:pageSize": (a) => r.value.pageSize = a,
      disabled: m.value,
      total: r.value.total
    }, null)])])
  })]);
}, {
  name: "ProTable",
  emits: ["update:selectData"],
  props: {
    options: Array,
    request: Function,
    dragSort: [Boolean, String],
    dragHandler: Function,
    empty: [String, Function, Object],
    formHeader: [String, Function, Object],
    tableProps: [Object],
    dragAble: Boolean,
    bordered: {
      type: Boolean,
      default: !0
    },
    dragType: {
      type: String,
      default: "row-handler"
    },
    selectData: Array,
    selectAble: Boolean,
    selectType: {
      type: String,
      default: "multiple"
    },
    editAble: Boolean,
    hideFooter: Boolean,
    expanedRow: Function,
    hideForm: Boolean,
    rowKey: {
      type: String,
      default: "id"
    },
    dataActionsAlign: {
      type: String,
      default: "left"
    }
  }
}), me = X(re);
export {
  re as P,
  me as a
};