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

ProComponents tdesign-vue-next + Vue3 + TS

import { a as ie, w as ue } from "./utils-DU1amZow.js";
import { defineComponent as de, useSlots as ce, ref as f, nextTick as me, watch as ye, resolveComponent as x, openBlock as d, createElementBlock as z, renderSlot as P, createCommentVNode as g, createVNode as V, withCtx as h, unref as c, createSlots as O, createElementVNode as H, createTextVNode as R, toDisplayString as W, createBlock as b, renderList as G, Fragment as fe, mergeProps as v } from "vue";
import { r as ge, P as he } from "./ProForm-CApdDyRX.js";
import { u as J } from "./hooks-9GWkbKry.js";
import { P as be } from "./ProFormText-DtTOW5h3.js";
import { P as ve } from "./ProFormCheckbox-CRYQ-khh.js";
import { P as ke } from "./ProFormSelect-BVLxiVvQ.js";
import { P as Pe } from "./ProFormRadio-DMjyfxq_.js";
import { P as Se } from "./ProFormDatepicker-CN6X0J_I.js";
import { P as Ne } from "./ProFormInputNumber-BBBIvV3B.js";
import { P as Ve } from "./ProFormTextarea-Dp6OBJij.js";
import { P as Fe } from "./ProFormTreeSelect-CU3vDiPL.js";
function _e(l) {
  const u = [];
  return l.selectAble && u.unshift({
    colKey: "row-select",
    type: "multiple"
  }), l.options.forEach((r) => {
    r.hideInTable || u.push(xe(r));
  }), u;
}
function xe(l, u) {
  const r = {
    colKey: l.key,
    title: l.title,
    ellipsis: l.ellipsis,
    ellipsisTitle: l.ellipsisTitle,
    fixed: l.fixed,
    sorter: l.sorter,
    children: l.children,
    width: l.width,
    ...l.tableColumnsProps
  };
  return l.render && (r.cell = (U, t) => l.render(t)), r;
}
function ze(l) {
  const u = [];
  return l.forEach((r) => {
    u.push({
      ...r,
      label: r.labelText || r.title,
      span: r.span || 3,
      formItemProps: {
        labelAlign: r.labelAlign || "right",
        labelWidth: r.labelWidth
      },
      hidden: r.hideInSearch,
      name: r.key,
      type: r.type || "text"
    });
  }), u;
}
function Te(l) {
  return l.map((u) => `form-${u.key}`);
}
function Q(l) {
  return l.filter((u) => !u.hideInSearch);
}
function we(l) {
  let u = [];
  const r = Q(l.options);
  return u = [
    ...ze(r)
  ].map((t, T) => ({
    ...t,
    hidden: !(T + 1 <= (l.searchNum || 3)),
    placeholder: t.placeholder
  })), u.push({
    name: "search-extral",
    span: 3
  }), u;
}
function Ce(l) {
  const u = l.options.map((r) => r.hideInSearch).every((r) => r === !0);
  return l.hideForm || u;
}
const Ue = { class: "pro-table" }, Ee = {
  key: 0,
  class: "pro-table-header"
}, Be = {
  key: 1,
  class: "pro-table-form"
}, Oe = { class: "pro-table-form-actions" }, Re = { class: "pro-table-body" }, $e = {
  key: 2,
  class: "pro-table-page"
}, De = /* @__PURE__ */ de({
  name: "ProTable",
  __name: "ProTable",
  props: {
    options: {},
    request: {},
    rowKey: { default: "id" },
    onSearchSuccess: {},
    onSearchFail: {},
    hideForm: { type: Boolean, default: !1 },
    hidePage: { type: Boolean },
    searchNum: { default: 3 },
    loadingAble: { type: Boolean, default: !0 },
    size: {},
    filterEmptyStr: { type: Boolean, default: !0 },
    bordered: { type: Boolean },
    stripe: { type: Boolean },
    hover: { type: Boolean },
    empty: {},
    cellEmptyContent: {},
    selectData: {},
    selectAble: { type: Boolean },
    tableProps: {},
    page: { default: () => ({
      pageSize: 10,
      pageNum: 1,
      total: 10
    }) },
    pageProps: {},
    searchText: { default: "查询" },
    searchStyle: {},
    searchIcon: {},
    loadingProps: {}
  },
  emits: ["update:page", "update:selectData", "select-change", "reset", "reload"],
  setup(l, { expose: u, emit: r }) {
    const U = {
      text: {
        propsName: "textProps",
        componentName: "ProFormText"
      },
      select: {
        propsName: "selectProps",
        componentName: "ProFormSelect"
      },
      radio: {
        propsName: "radioProps",
        componentName: "ProFormRadio"
      },
      textarea: {
        propsName: "textareaProps",
        componentName: "ProFormTextarea"
      },
      datepicker: {
        propsName: "datepickerProps",
        componentName: "ProFormDatepicker"
      },
      checkbox: {
        propsName: "checkboxProps",
        componentName: "ProFormCheckbox"
      },
      number: {
        propsName: "numberProps",
        componentName: "ProFormInputNumber"
      },
      treeSelect: {
        propsName: "treeSelectProps",
        componentName: "ProFormTreeSelect"
      }
    }, t = l, T = r, S = ce(), F = f([]), $ = f(), w = f(), E = f({}), k = f(!1), D = f(!1), C = f(!1), I = f(!1), A = f([]), K = f(), _ = f([]);
    let q = f([]);
    const L = J(t, "selectData", T, t.selectData || []), s = J(t, "page", T, t.page || { pageNum: 1, pageSize: 10, total: 10 });
    me(() => {
      X();
    });
    function X() {
      M(), Y(), j();
    }
    function M() {
      A.value = _e(t), K.value = t.options.filter((a) => a.isSlot).map((a) => a.key);
    }
    function j() {
      N(1, s.value.pageSize);
    }
    function Z() {
      N(1, s.value.pageSize);
    }
    function ee(a) {
      s.value.pageNum = a.current || 1, s.value.pageSize = a.pageSize, N(s.value.pageNum, s.value.pageSize);
    }
    function N(a, p) {
      if (!t.request) {
        ie("request is not function");
        return;
      }
      t.loadingAble && (k.value = !0);
      const y = t.filterEmptyStr ? ge(B()) : B();
      delete y["search-extral"], t.request({
        pageNum: s.value.pageNum,
        pageSize: p,
        form: y,
        sort: E.value
      }).then((m) => {
        t.onSearchSuccess && t.onSearchSuccess(m), _.value = m.list, s.value.total = m.total;
      }).catch((m) => {
        t.onSearchFail && t.onSearchFail(m);
      }).finally(() => {
        s.value.pageNum = a, s.value.pageSize = p, k.value = !1;
      });
    }
    function oe(a, { col: p }) {
      const { key: y } = p;
      let m = { ...E.value };
      a === void 0 && m[y] ? delete m[y] : a !== void 0 && (m[y] = a.descending ? "desc" : "asc"), E.value = m, N(s.value.pageNum, s.value.pageSize);
    }
    function te(a) {
      L.value = a;
    }
    function Y() {
      D.value = Ce(t), q.value = Te(t.options), I.value = Q(t.options).length > t.searchNum, F.value = we(t);
    }
    function ae(a) {
      a ? F.value = F.value.map((p) => ({ ...p, hidden: !1 })) : Y(), C.value = a;
    }
    function o(a) {
      a = a.replace("form-", "").trim();
      const p = F.value.find((y) => y.key === a);
      return {
        option: p,
        component: U[p.type || "text"]
      };
    }
    function B() {
      var a;
      return (a = w.value) == null ? void 0 : a.getFormValue();
    }
    return u({
      getFormValue: B,
      reset: (a = !1) => {
        var p;
        a && ((p = w.value) == null || p.reset()), N(s.value.pageNum, s.value.pageSize);
      },
      reload: () => {
        var a;
        (a = w.value) == null || a.reset(), N(1, s.value.pageSize);
      },
      getTdesignTable: () => $.value,
      insertTableData: (a, p) => {
        a < 0 || a > _.value.length || (_.value[a] = p);
      }
    }), ye(() => t.options, () => {
      M();
    }, { deep: !0 }), (a, p) => {
      const y = x("t-button"), m = x("t-card"), le = x("t-table"), ne = x("t-loading"), re = x("t-pagination");
      return d(), z("div", Ue, [
        S.header ? (d(), z("div", Ee, [
          P(a.$slots, "header")
        ])) : g("", !0),
        D.value ? g("", !0) : (d(), z("div", Be, [
          V(m, null, {
            default: h(() => [
              V(c(he), {
                marginY: C.value ? 16 : 0,
                filterEmptyStr: t.filterEmptyStr,
                filter: "",
                onSubmit: j,
                onReset: Z,
                hideFooter: "",
                ref_key: "proFormRef",
                ref: w,
                options: F.value
              }, O({
                "form-search-extral": h(() => [
                  H("div", Oe, [
                    V(y, {
                      loading: k.value,
                      type: "submit"
                    }, {
                      default: h(() => [
                        R(W(t.searchText), 1)
                      ]),
                      _: 1
                    }, 8, ["loading"]),
                    V(y, {
                      loading: k.value,
                      theme: "default",
                      type: "reset"
                    }, {
                      default: h(() => p[3] || (p[3] = [
                        R("重置")
                      ])),
                      _: 1
                    }, 8, ["loading"]),
                    I.value ? (d(), b(y, {
                      key: 0,
                      onClick: p[0] || (p[0] = (e) => ae(!C.value))
                    }, {
                      default: h(() => [
                        R(W(C.value ? "收缩" : "展开"), 1)
                      ]),
                      _: 1
                    })) : g("", !0)
                  ])
                ]),
                _: 2
              }, [
                G(c(q), (e) => ({
                  name: e,
                  fn: h(({ form: i }) => [
                    S[e] ? P(a.$slots, e, {
                      key: 1,
                      form: i
                    }) : (d(), z(fe, { key: 0 }, [
                      !o(e).option.type || o(e).option.type === "text" ? (d(), b(c(be), v({
                        key: 0,
                        name: o(e).option.key,
                        label: o(e).option.title,
                        modelValue: i[o(e).option.key],
                        "onUpdate:modelValue": (n) => i[o(e).option.key] = n
                      }, {
                        ...o(e).option,
                        //@ts-ignore
                        ...o(e).option[o(e).component.propsName]
                      }), null, 16, ["name", "label", "modelValue", "onUpdate:modelValue"])) : g("", !0),
                      o(e).option.type === "select" ? (d(), b(c(ke), v({
                        key: 1,
                        name: o(e).option.key,
                        label: o(e).option.title,
                        modelValue: i[o(e).option.key],
                        "onUpdate:modelValue": (n) => i[o(e).option.key] = n
                      }, {
                        ...o(e).option,
                        //@ts-ignore
                        ...o(e).option[o(e).component.propsName]
                      }), null, 16, ["name", "label", "modelValue", "onUpdate:modelValue"])) : g("", !0),
                      o(e).option.type === "radio" ? (d(), b(c(Pe), v({
                        key: 2,
                        name: o(e).option.key,
                        label: o(e).option.title,
                        modelValue: i[o(e).option.key],
                        "onUpdate:modelValue": (n) => i[o(e).option.key] = n
                      }, {
                        ...o(e).option,
                        //@ts-ignore
                        ...o(e).option[o(e).component.propsName]
                      }), null, 16, ["name", "label", "modelValue", "onUpdate:modelValue"])) : g("", !0),
                      o(e).option.type === "checkbox" ? (d(), b(c(ve), v({
                        key: 3,
                        name: o(e).option.key,
                        label: o(e).option.title,
                        modelValue: i[o(e).option.key],
                        "onUpdate:modelValue": (n) => i[o(e).option.key] = n
                      }, {
                        ...o(e).option,
                        //@ts-ignore
                        ...o(e).option[o(e).component.propsName]
                      }), null, 16, ["name", "label", "modelValue", "onUpdate:modelValue"])) : g("", !0),
                      o(e).option.type === "number" ? (d(), b(c(Ne), v({
                        key: 4,
                        name: o(e).option.key,
                        label: o(e).option.title,
                        modelValue: i[o(e).option.key],
                        "onUpdate:modelValue": (n) => i[o(e).option.key] = n
                      }, {
                        ...o(e).option,
                        //@ts-ignore
                        ...o(e).option[o(e).component.propsName]
                      }), null, 16, ["name", "label", "modelValue", "onUpdate:modelValue"])) : g("", !0),
                      o(e).option.type === "datepicker" ? (d(), b(c(Se), v({
                        key: 5,
                        name: o(e).option.key,
                        label: o(e).option.title,
                        modelValue: i[o(e).option.key],
                        "onUpdate:modelValue": (n) => i[o(e).option.key] = n
                      }, {
                        ...o(e).option,
                        //@ts-ignore
                        ...o(e).option[o(e).component.propsName]
                      }), null, 16, ["name", "label", "modelValue", "onUpdate:modelValue"])) : g("", !0),
                      o(e).option.type === "treeSelect" ? (d(), b(c(Fe), v({
                        key: 6,
                        name: o(e).option.key,
                        label: o(e).option.title,
                        modelValue: i[o(e).option.key],
                        "onUpdate:modelValue": (n) => i[o(e).option.key] = n
                      }, {
                        ...o(e).option,
                        //@ts-ignore
                        ...o(e).option[o(e).component.propsName]
                      }), null, 16, ["name", "label", "modelValue", "onUpdate:modelValue"])) : g("", !0),
                      o(e).option.type === "textarea" ? (d(), b(c(Ve), v({
                        key: 7,
                        name: o(e).option.key,
                        label: o(e).option.title,
                        modelValue: i[o(e).option.key],
                        "onUpdate:modelValue": (n) => i[o(e).option.key] = n
                      }, {
                        ...o(e).option,
                        //@ts-ignore
                        ...o(e).option[o(e).component.propsName]
                      }), null, 16, ["name", "label", "modelValue", "onUpdate:modelValue"])) : g("", !0)
                    ], 64))
                  ])
                }))
              ]), 1032, ["marginY", "filterEmptyStr", "options"])
            ]),
            _: 3
          })
        ])),
        H("div", Re, [
          V(m, null, O({
            default: h(() => {
              var e, i;
              return [
                S.card ? (d(), b(ne, v({
                  key: 1,
                  size: (e = t.loadingProps) == null ? void 0 : e.size,
                  loading: k.value
                }, t.loadingProps, {
                  "show-overlay": (i = t.loadingProps) == null ? void 0 : i.showOverlay
                }), {
                  default: h(() => [
                    P(a.$slots, "card", { list: _.value })
                  ]),
                  _: 3
                }, 16, ["size", "loading", "show-overlay"])) : (d(), b(le, v({
                  key: 0,
                  onSelectChange: te,
                  bordered: t.bordered,
                  stripe: t.stripe,
                  hover: t.hover,
                  ref_key: "tableRef",
                  ref: $,
                  empty: t.empty,
                  cellEmptyContent: t.cellEmptyContent
                }, t.tableProps, {
                  loading: k.value,
                  onSortChange: oe,
                  size: t.size,
                  "row-key": t.rowKey,
                  data: _.value,
                  "selected-row-keys": c(L),
                  columns: A.value
                }), O({ _: 2 }, [
                  S.expandedRow ? {
                    name: "expandedRow",
                    fn: h(({ row: n }) => [
                      P(a.$slots, "expandedRow", { row: n })
                    ]),
                    key: "0"
                  } : void 0,
                  G(K.value, (n) => ({
                    name: n,
                    fn: h(({ row: pe, rowIndex: se }) => [
                      P(a.$slots, `table-${n}`, {
                        row: pe,
                        index: se
                      })
                    ])
                  }))
                ]), 1040, ["bordered", "stripe", "hover", "empty", "cellEmptyContent", "loading", "size", "row-key", "data", "selected-row-keys", "columns"])),
                !t.hidePage && t.page ? (d(), z("div", $e, [
                  V(re, v({
                    disabled: k.value,
                    size: t.size,
                    current: c(s).pageNum,
                    "onUpdate:current": p[1] || (p[1] = (n) => c(s).pageNum = n),
                    total: c(s).total,
                    "page-size": c(s).pageSize,
                    "onUpdate:pageSize": p[2] || (p[2] = (n) => c(s).pageSize = n)
                  }, t.pageProps, { onChange: ee }), null, 16, ["disabled", "size", "current", "total", "page-size"])
                ])) : g("", !0)
              ];
            }),
            _: 2
          }, [
            S["pro-table-title"] ? {
              name: "title",
              fn: h(() => [
                P(a.$slots, "pro-table-title")
              ]),
              key: "0"
            } : void 0,
            S["pro-table-actions"] ? {
              name: "actions",
              fn: h(() => [
                P(a.$slots, "pro-table-actions")
              ]),
              key: "1"
            } : void 0
          ]), 1024)
        ])
      ]);
    };
  }
}), Qe = ue(De);
export {
  Qe as P
};