sapit-ui-plus/lib/js/SListCardLayout.js

import { h as F, resolveComponent as m, resolveDirective as w, openBlock as i, createElementBlock as r, createElementVNode as d, toDisplayString as v, Fragment as W, renderList as M, withDirectives as p, createBlock as y, withCtx as f, resolveDynamicComponent as P, createCommentVNode as a, createTextVNode as b, vShow as g, renderSlot as u, normalizeStyle as h, createVNode as k, createStaticVNode as R } from "vue";
import { S as T } from "./index19.js";
import { l as z, U as D, a9 as L } from "./index2.js";
const N = {
  name: "SListLayout",
  components: {
    STable: T
  },
  data() {
    return {
      _: this,
      tableScrollPx: 0,
      isFilter: !1,
      isMoreFilter: !1,
      layoutHeight: 0,
      spinning: !1,
      pageSize: 20,
      sideWidth: 232,
      showSelection: !1,
      selectedRowKeys: [],
      startX: 0,
      dragWidth: 0,
      renderButtons: [],
      iconMap: {
        add: "PlusCircleOutlined",
        edit: "FormOutlined",
        delete: "DeleteOutlined",
        remove: "DeleteOutlined",
        import: "UploadOutlined",
        export: "DownloadOutlined",
        assign: "ClusterOutlined",
        execute: "PlayOircleOutlined",
        pause: "PauseOircleOutlined",
        resume: "PoweroffOutlined",
        approve: "HighlightOutlined",
        setting: "SettingOutlined",
        TopOfType: "VerticalAlignTopOutlined",
        TOP: "VerticalAlignTopOutlined",
        synchronize: "SyncOutlined"
      }
    };
  },
  props: {
    col: {
      type: [Number, String],
      default: 4
    },
    cardHeight: {
      type: Number,
      default: 300
    },
    // 页面标题
    title: {
      type: String,
      required: !0
    },
    buttons: {
      type: Array,
      default() {
        return [
          {
            name: "添加",
            key: "add",
            show: !0,
            type: "primary",
            icon: !0,
            api: null
          },
          {
            name: "批量删除",
            key: "remove",
            action: "remove",
            show: !0,
            icon: !0,
            api: null
          },
          {
            name: "导入",
            key: "import",
            show: !0,
            icon: !0,
            api: null,
            templateApi: null
          },
          {
            name: "导出",
            key: "export",
            show: !0,
            icon: !0,
            api: null
          }
        ];
      }
    },
    showPagination: {
      type: Boolean,
      default: !0
    },
    loadData: {
      type: Function,
      required: !0
    },
    pSize: {
      type: [String, Number],
      default: 20
    }
  },
  watch: {
    buttons: {
      handler(e) {
        e.length && this.initRenderButtons(e);
      },
      immediate: !0,
      deep: !0
    }
  },
  methods: {
    isFunction(e, t = "") {
      return !!(e && typeof e == "function");
    },
    renderIcon(e) {
      return typeof e.icon == "string" ? e.icon : typeof e.icon == "boolean" && e.icon ? this.iconMap[e.key] : "";
    },
    initRenderButtons(e) {
      this.renderButtons = e.map((t) => (t.key === "remove" && (this.showSelection = !0), t));
    },
    initComponent() {
      this.$nextTick(() => {
        this.layoutHeight = this.$refs.layout.parentNode.offsetHeight - 50, this.pageSize = this.pSize, this.setLayoutHeight();
      });
    },
    toggleFilter() {
      this.isMoreFilter = !this.isMoreFilter, this.setLayoutHeight();
    },
    // 查询条件重置
    filterReset() {
      this.$emit("reset");
    },
    reload() {
      this.$refs.table.refresh(!0);
    },
    // 设置列表路由地址
    sethsitoryPath() {
      const e = this.$route;
      sessionStorage.setItem("backPath", e.path);
    },
    // 按钮回调
    btnCallback(e) {
      this.$emit("btnCallback", e.key, this.selectedRowKeys), this[e.key] ? this[e.key](e) : this.handAction(e);
    },
    // 其他未定义按钮方法生成
    handAction(e) {
      if (e.selection !== !1 && !this.selectedRowKeys.length) {
        this.$message.warn(`请选择要${e.name}的数据`);
        return;
      }
      if (this.isFunction(e.api, e.name, e.key)) {
        if (e.confirm) {
          this.$confirm({
            title: `${e.name}`,
            content: () => F("div", { style: "color:red" }, `确认要{${e.name}}数据吗？`),
            onOk: () => {
              this.spinning = !0, e.api(this.selectedRowKeys).then(() => {
                this.$message.success(`${e.name}成功`), this.$emit("reset");
              }).finally(() => {
                this.spinning = !1;
              });
            }
          });
          return;
        }
        this.spinning = !0, e.api(this.selectedRowKeys).then(() => {
          this.$message.success(`${e.name}成功`), this.$emit("reset");
        }).finally(() => {
          this.spinning = !1;
        });
      }
    },
    // 变更按钮状态
    setStateBtn(e, t) {
      typeof e == "string" ? this.setStateBtnItem(e, t) : e.forEach((s) => {
        this.setStateBtnItem(s, t);
      });
    },
    setStateBtnItem(e, t) {
      const s = this.renderButtons.find((c) => c.key === e);
      if (!s) {
        console.error(`按钮(${e})未定义, 请确认该变更状态按钮是否设置正确`);
        return;
      }
      Object.keys(t).forEach((c) => {
        s[c] = t[c];
      });
    },
    // 添加方法
    add() {
    },
    // 删除方法
    delete(e) {
      this.handAction(e);
    },
    // 设置表格滚动条高度
    setLayoutHeight() {
      this.$nextTick(() => {
        const t = this.$refs.filters && this.$refs.filters.offsetHeight || 0, s = this.$refs.tabs && this.$refs.tabs.offsetHeight || 0;
        this.tableScrollPx = this.layoutHeight - t - 0 - s;
      });
    }
  },
  mounted() {
    this.initComponent();
  },
  directives: {
    sidedrag: {
      mounted(e, t) {
        e.style.cursor = "e-resize";
        const s = t.value;
        document.addEventListener("selectstart", (c) => {
          c.preventDefault();
        }), e.onmousedown = (c) => {
          s.startX = c.clientX, s.dragWidth = s.sideWidth, document.onmousemove = (o) => {
            const l = o.clientX - s.startX;
            if (l < 0) {
              if (s.dragWidth + l <= 232) return;
              s.sideWidth = s.dragWidth + l;
            } else {
              if (s.dragWidth + l >= 500) return;
              s.sideWidth = s.dragWidth + l;
            }
          }, document.onmouseup = () => {
            document.onmousemove = document.onmousedown = null;
          };
        };
      }
    }
  }
}, I = {
  class: "list-layout",
  ref: "layout"
}, x = { class: "tools" }, A = { class: "title" }, V = { class: "btns" }, K = {
  key: 0,
  style: { "margin-left": "8px" }
}, E = {
  class: "list-filter-wrap",
  ref: "filters"
}, X = {
  key: 0,
  class: "filter-content"
}, q = { class: "filter" }, U = {
  key: 1,
  class: "reset-wrap"
}, j = {
  key: 1,
  class: "filter-more-content"
}, G = {
  key: 2,
  class: "desc-wrap"
}, J = { class: "table-content" }, Q = {
  key: 0,
  class: "tabs-wrap",
  ref: "tabs"
}, Y = { class: "other" };
function Z(e, t, s, c, o, l) {
  const _ = D, S = m("down-outlined"), $ = m("up-outlined"), O = m("sync-outlined"), C = L, H = w("action"), B = w("sidedrag");
  return i(), r("div", I, [
    d("div", x, [
      d("div", A, v(s.title), 1),
      d("div", V, [
        (i(!0), r(W, null, M(o.renderButtons, (n) => (i(), r("span", {
          class: "item-btn",
          key: n.key
        }, [
          p((i(), y(_, {
            class: "btn",
            disabled: !!n.disabled,
            type: n.type || n.key === "add" ? "primary" : "default",
            onClick: (ee) => l.btnCallback(n)
          }, {
            icon: f(() => [
              l.renderIcon(n) ? (i(), y(P(l.renderIcon(n)), { key: 0 })) : a("", !0)
            ]),
            default: f(() => [
              b(" " + v(n.name), 1)
            ]),
            _: 2
          }, 1032, ["disabled", "type", "onClick"])), [
            [H, n.action || n.key],
            [g, n.show !== !1]
          ])
        ]))), 128)),
        e.$slots.otherBtns ? (i(), r("span", K, [
          u(e.$slots, "otherBtns", { selections: o.selectedRowKeys }, void 0, !0)
        ])) : a("", !0)
      ])
    ]),
    d("div", {
      class: "list-layout-main",
      style: h({ height: o.layoutHeight + "px" })
    }, [
      e.$slots.tree ? (i(), r("div", {
        key: 0,
        class: "side",
        ref: "side",
        style: h([{ height: o.layoutHeight + "px", width: o.sideWidth + "px" }, { "overflow-y": "auto" }])
      }, [
        u(e.$slots, "tree", {}, void 0, !0)
      ], 4)) : a("", !0),
      e.$slots.tree ? p((i(), r("div", {
        key: 1,
        class: "side-bar",
        style: h({ height: o.layoutHeight + "px", backgroundColor: e.$theme.bgColor })
      }, null, 4)), [
        [B, o._]
      ]) : a("", !0),
      e.$slots.empty ? (i(), r("div", {
        key: 3,
        class: "layout-list-content",
        style: h({ height: o.layoutHeight + "px" })
      }, [
        u(e.$slots, "empty", {}, void 0, !0)
      ], 4)) : (i(), r("div", {
        key: 2,
        class: "layout-list-content",
        style: h({ height: o.layoutHeight - 1 + "px" })
      }, [
        p(d("div", E, [
          e.$slots.filter ? (i(), r("div", X, [
            d("div", q, [
              u(e.$slots, "filter", {}, void 0, !0)
            ]),
            e.$slots.filterMore ? (i(), r("a", {
              key: 0,
              class: "filter-more-btn",
              onClick: t[0] || (t[0] = (...n) => l.toggleFilter && l.toggleFilter(...n))
            }, [
              b(v(o.isMoreFilter ? "收起" : "更多") + " ", 1),
              o.isMoreFilter ? (i(), y($, {
                key: 1,
                style: { "font-size": "12px" }
              })) : (i(), y(S, {
                key: 0,
                style: { "font-size": "12px" }
              }))
            ])) : a("", !0),
            e.$slots.filter ? (i(), r("div", U, [
              k(C, {
                placement: "top",
                overlayStyle: { maxWidth: "500px" }
              }, {
                title: f(() => t[1] || (t[1] = [
                  d("span", null, "条件重置", -1)
                ])),
                default: f(() => [
                  k(_, {
                    style: { "padding-bottom": "2px" },
                    onClick: l.filterReset
                  }, {
                    icon: f(() => [
                      k(O)
                    ]),
                    _: 1
                  }, 8, ["onClick"])
                ]),
                _: 1
              })
            ])) : a("", !0)
          ])) : a("", !0),
          e.$slots.filterMore ? p((i(), r("div", j, [
            u(e.$slots, "filterMore", {}, void 0, !0)
          ], 512)), [
            [g, o.isMoreFilter]
          ]) : a("", !0),
          e.$slots.desc ? (i(), r("div", G, [
            u(e.$slots, "desc", {}, void 0, !0)
          ])) : a("", !0)
        ], 512), [
          [g, e.$slots.filter]
        ]),
        d("div", J, [
          e.$slots.tabs ? (i(), r("div", Q, [
            u(e.$slots, "tabs", {}, void 0, !0)
          ], 512)) : a("", !0),
          d("div", {
            class: "table-container",
            style: h({
              display: "grid",
              gridTemplateColumns: `repeat(${s.col}, 1fr)`,
              gap: "12px",
              height: o.tableScrollPx - 1 + "px"
            })
          }, t[2] || (t[2] = [
            R('<div class="item-card" data-v-83eef4d8></div><div class="item-card" data-v-83eef4d8></div><div class="item-card" data-v-83eef4d8></div><div class="item-card" data-v-83eef4d8></div><div class="item-card" data-v-83eef4d8></div><div class="item-card" data-v-83eef4d8></div><div class="item-card" data-v-83eef4d8></div><div class="item-card" data-v-83eef4d8></div><div class="item-card" data-v-83eef4d8></div><div class="item-card" data-v-83eef4d8></div><div class="item-card" data-v-83eef4d8></div><div class="item-card" data-v-83eef4d8></div><div class="item-card" data-v-83eef4d8></div><div class="item-card" data-v-83eef4d8></div><div class="item-card" data-v-83eef4d8></div>', 15)
          ]), 4)
        ])
      ], 4))
    ], 4),
    d("div", Y, [
      u(e.$slots, "other", {}, void 0, !0)
    ])
  ], 512);
}
const oe = /* @__PURE__ */ z(N, [["render", Z], ["__scopeId", "data-v-83eef4d8"]]);
export {
  oe as default
};