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

import { h as I, resolveComponent as m, resolveDirective as _, openBlock as n, createElementBlock as l, createElementVNode as d, toDisplayString as f, Fragment as K, renderList as b, withDirectives as v, createBlock as g, withCtx as p, resolveDynamicComponent as L, createCommentVNode as a, createTextVNode as S, vShow as C, renderSlot as u, normalizeStyle as y, createVNode as k, createSlots as P } from "vue";
import { S as z } from "./index19.js";
import { l as W, U as T, a9 as A } from "./index2.js";
const M = {
  name: "SListLayout",
  components: {
    STable: z
    // ImportModal
  },
  data() {
    return {
      _: this,
      importLoading: !1,
      exportLoading: !1,
      importVisible: !1,
      isFilter: !1,
      isMoreFilter: !1,
      layoutHeight: 0,
      tableScrollPx: 0,
      spinning: !1,
      pageSize: 20,
      sideWidth: 232,
      showSelection: !1,
      selectedRowKeys: [],
      expandedRowKeys: [],
      renderColumns: [],
      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: {
    // 页面标题
    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
          }
        ];
      }
    },
    // 列表checkbox列
    isSelection: {
      type: Boolean,
      default: !1
    },
    showPagination: {
      type: Boolean,
      default: !0
    },
    columns: {
      type: Array,
      default() {
        return [];
      }
    },
    rowKey: {
      type: [Function, String],
      default: "id"
    },
    loadData: {
      type: Function,
      required: !0
    },
    pSize: {
      type: [String, Number],
      default: 20
    }
  },
  watch: {
    buttons: {
      handler(e) {
        e.length && this.initRenderButtons(e);
      },
      immediate: !0,
      deep: !0
    },
    columns: {
      handler(e) {
        console.log("watch"), this.initComponent();
      }
    }
  },
  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));
    },
    initTable() {
      this.$nextTick(() => {
        var e;
        this.layoutHeight = ((e = this.$refs.layout) == null ? void 0 : e.parentNode.offsetHeight) - 60, this.setLayoutHeight(), this.pageSize = this.pSize, this.renderColumns = this.columns.map((t) => ((t.template || t.isClick || t.dataIndex === "action" && !t.customRender) && !t.scopedSlots && (t.scopedSlots = { customRender: t.dataIndex }), t));
      });
    },
    initComponent() {
      this.initTable();
    },
    toggleFilter() {
      this.isMoreFilter = !this.isMoreFilter, this.setLayoutHeight();
    },
    // 查询条件重置
    filterReset() {
      this.$emit("reset");
    },
    reload() {
      this.$refs.table.refresh(!0);
    },
    // 树列表 - 新增/编辑/详情 时 不刷新
    setFilterParams() {
    },
    // 设置列表路由地址
    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: () => I("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);
    },
    // 导入方法
    import() {
      this.importVisible = !0;
    },
    // 导出方法
    export(e) {
      this.isFunction(e.api, e.name, e.key) && (this.spinning = !0, this.exportApi().then(() => {
        this.spinning = !1;
      }));
    },
    // 导入回调
    importExcel(e) {
      this.importLoading = !0;
      const t = this.renderButtons.find((s) => s.key === "import");
      this.isFunction(t.api, t.name, t.key) && t.api(e).then(() => {
        this.importLoading = !1, this.$message.success("导入成功"), this.importVisible = !1, this.$emit("reset");
      });
    },
    // 模板下载回调
    exportExcelTemplate() {
      const e = this.renderButtons.find((t) => t.key === "import");
      this.isFunction(e.templateApi, e.name, e.key) && (this.exportLoading = !0, e.templateApi().finally(() => {
        this.exportLoading = !1;
      }));
    },
    // 表格可点击列事件回调
    tableColCallback(e, t) {
      this.$emit("tableColCallback", e, t);
    },
    onSelectChange(e) {
      this.selectedRowKeys = 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 - 103 - 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 r = o.clientX - s.startX;
            if (r < 0) {
              if (s.dragWidth + r <= 232) return;
              s.sideWidth = s.dragWidth + r;
            } else {
              if (s.dragWidth + r >= 500) return;
              s.sideWidth = s.dragWidth + r;
            }
          }, document.onmouseup = () => {
            document.onmousemove = document.onmousedown = null;
          };
        };
      }
    }
  }
}, D = {
  class: "list-layout",
  ref: "layout"
}, V = { class: "tools" }, E = { class: "title" }, N = { class: "btns" }, X = {
  key: 0,
  style: { "margin-left": "8px" }
}, U = {
  class: "list-filter-wrap",
  ref: "filters"
}, q = {
  key: 0,
  class: "filter-content"
}, j = { class: "filter" }, G = {
  key: 1,
  class: "reset-wrap"
}, J = {
  key: 1,
  class: "filter-more-content"
}, Q = {
  key: 2,
  class: "desc-wrap"
}, Y = { class: "table-content" }, Z = {
  key: 0,
  class: "tabs-wrap",
  ref: "tabs"
}, ee = { class: "table-container" }, te = ["onClick"], se = { class: "other" };
function ie(e, t, s, c, o, r) {
  const w = T, x = m("down-outlined"), O = m("up-outlined"), B = m("sync-outlined"), F = A, $ = m("s-table"), H = _("action"), R = _("sidedrag");
  return n(), l("div", D, [
    d("div", V, [
      d("div", E, f(s.title), 1),
      d("div", N, [
        (n(!0), l(K, null, b(o.renderButtons, (i) => (n(), l("span", {
          class: "item-btn",
          key: i.key
        }, [
          v((n(), g(w, {
            class: "btn",
            disabled: !!i.disabled,
            type: i.type || i.key === "add" ? "primary" : "default",
            onClick: (h) => r.btnCallback(i)
          }, {
            icon: p(() => [
              r.renderIcon(i) ? (n(), g(L(r.renderIcon(i)), { key: 0 })) : a("", !0)
            ]),
            default: p(() => [
              S(" " + f(i.name), 1)
            ]),
            _: 2
          }, 1032, ["disabled", "type", "onClick"])), [
            [H, i.action || i.key],
            [C, i.show !== !1]
          ])
        ]))), 128)),
        e.$slots.otherBtns ? (n(), l("span", X, [
          u(e.$slots, "otherBtns", { selections: o.selectedRowKeys }, void 0, !0)
        ])) : a("", !0)
      ])
    ]),
    d("div", {
      class: "list-layout-main",
      style: y({ height: o.layoutHeight + "px" })
    }, [
      e.$slots.tree ? (n(), l("div", {
        key: 0,
        class: "side",
        ref: "side",
        style: y([{ height: o.layoutHeight + "px", width: o.sideWidth + "px" }, { "overflow-y": "auto" }])
      }, [
        u(e.$slots, "tree", {}, void 0, !0)
      ], 4)) : a("", !0),
      e.$slots.tree ? v((n(), l("div", {
        key: 1,
        class: "side-bar",
        style: y({ height: o.layoutHeight + "px", backgroundColor: e.$theme.bgColor })
      }, null, 4)), [
        [R, o._]
      ]) : a("", !0),
      e.$slots.empty ? (n(), l("div", {
        key: 3,
        class: "layout-list-content",
        style: y({ height: o.layoutHeight + "px" })
      }, [
        u(e.$slots, "empty", {}, void 0, !0)
      ], 4)) : (n(), l("div", {
        key: 2,
        class: "layout-list-content",
        style: y({ height: o.layoutHeight + "px" })
      }, [
        d("div", U, [
          e.$slots.filter ? (n(), l("div", q, [
            d("div", j, [
              u(e.$slots, "filter", {}, void 0, !0)
            ]),
            e.$slots.filterMore ? (n(), l("a", {
              key: 0,
              class: "filter-more-btn",
              onClick: t[0] || (t[0] = (...i) => r.toggleFilter && r.toggleFilter(...i))
            }, [
              S(f(o.isMoreFilter ? "收起" : "更多") + " ", 1),
              o.isMoreFilter ? (n(), g(O, {
                key: 1,
                style: { "font-size": "12px" }
              })) : (n(), g(x, {
                key: 0,
                style: { "font-size": "12px" }
              }))
            ])) : a("", !0),
            e.$slots.filter ? (n(), l("div", G, [
              k(F, {
                placement: "top",
                overlayStyle: { maxWidth: "500px" }
              }, {
                title: p(() => t[2] || (t[2] = [
                  d("span", null, "条件重置", -1)
                ])),
                default: p(() => [
                  k(w, {
                    style: { "padding-bottom": "2px" },
                    onClick: r.filterReset
                  }, {
                    icon: p(() => [
                      k(B)
                    ]),
                    _: 1
                  }, 8, ["onClick"])
                ]),
                _: 1
              })
            ])) : a("", !0)
          ])) : a("", !0),
          e.$slots.filterMore ? v((n(), l("div", J, [
            u(e.$slots, "filterMore", {}, void 0, !0)
          ], 512)), [
            [C, o.isMoreFilter]
          ]) : a("", !0),
          e.$slots.desc ? (n(), l("div", Q, [
            u(e.$slots, "desc", {}, void 0, !0)
          ])) : a("", !0)
        ], 512),
        d("div", Y, [
          e.$slots.tabs ? (n(), l("div", Z, [
            u(e.$slots, "tabs", {}, void 0, !0)
          ], 512)) : a("", !0),
          d("div", ee, [
            k($, {
              ref: "table",
              size: "middle",
              scroll: { y: o.tableScrollPx, x: "100%" },
              pageSize: o.pageSize,
              rowKey: s.rowKey,
              columns: o.renderColumns,
              data: s.loadData,
              "expanded-row-keys": o.expandedRowKeys,
              "onUpdate:expandedRowKeys": t[1] || (t[1] = (i) => o.expandedRowKeys = i),
              rowSelection: o.showSelection || s.isSelection ? { selectedRowKeys: o.selectedRowKeys, onChange: r.onSelectChange } : null,
              showPagination: s.showPagination
            }, P({ _: 2 }, [
              b(o.renderColumns, (i) => ({
                name: "bodyCell",
                fn: p((h) => [
                  i.template && h.column.dataIndex === i.dataIndex ? u(e.$slots, i.dataIndex, {
                    key: 0,
                    text: h.text,
                    record: h.record,
                    item: i
                  }, void 0, !0) : a("", !0),
                  i.isClick && h.column.dataIndex === i.dataIndex ? (n(), l("a", {
                    key: i.dataIndex,
                    onClick: (oe) => r.tableColCallback(i.dataIndex, h.record)
                  }, f(h.text.name), 9, te)) : a("", !0),
                  h.column.dataIndex === "action" ? u(e.$slots, "action", {
                    key: 2,
                    record: h.record
                  }, void 0, !0) : a("", !0)
                ])
              }))
            ]), 1032, ["scroll", "pageSize", "rowKey", "columns", "data", "expanded-row-keys", "rowSelection", "showPagination"])
          ])
        ])
      ], 4))
    ], 4),
    d("div", se, [
      u(e.$slots, "other", {}, void 0, !0)
    ])
  ], 512);
}
const ae = /* @__PURE__ */ W(M, [["render", ie], ["__scopeId", "data-v-338f5afc"]]);
export {
  ae as default
};