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

import { h as B, resolveComponent as f, resolveDirective as I, openBlock as o, createElementBlock as l, createElementVNode as r, toDisplayString as y, Fragment as R, renderList as S, withDirectives as H, createBlock as b, withCtx as m, resolveDynamicComponent as K, createCommentVNode as d, createTextVNode as k, vShow as P, renderSlot as u, createVNode as c, normalizeStyle as w, createSlots as L } from "vue";
import { S as T } from "./index7.js";
import { l as A, U as F } from "./index2.js";
const V = {
  name: "SListLayout",
  components: {
    STable: T
    // ImportModal
  },
  data() {
    return {
      _: this,
      filterVisible: !1,
      drawerVisible: !1,
      importLoading: !1,
      exportLoading: !1,
      importVisible: !1,
      isFilter: !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
    },
    /**
    title = String:列标题
    * @dataIndex = String:列数据字段名
    * @align = String:left || right || center
    * @ellipsis = true:是否自动换行
    * @isClick = true:是否支持点击跳转
    * @template = true:是否使用自定义模板
    * @customRender = Function:自定义jsx模板
    * @fixed = null:是否固定列 left || right || null 默认null
    * @isFixed = false:是否固定列 Boolean fixed存在时无效
    * @width = null:列宽 不要写百分比 组件内强制转换成Number
    * @filterConfig = 默认null | Object: 自定义筛选配置 {
        @filterType = String: SINGLE_SELECT:单选/ MULTIPLE_SELECT:多选/ GANDER:性别/ IS:是否/ USER:用户/ OFFICE:组织机构/ DATE:日期/ DATETIME:时间/ INPUT:输入框 INT:整数/  FLOAT:浮点数/
        @filterApi = null:自定义接口 Function => filterType = SINGLE_SELECT || MULTIPLE_SELECT || GANDER || IS 时生效
        @filterData = []:自定义数据 Array => filterType = SINGLE_SELECT || MULTIPLE_SELECT || GANDER || IS 时生效 优先级大于 filterApi
        @props = Object:自定义属性 使用filterApi时 处理 结果集中的 key、value 键值对映射内容使用
        @precision = 0:小数点后保留位数 filterType = FLOAT 时生效
        @step = 1:步长 filterType = INT || FLOAT 时生效
        @minValue = 0:最小值 filterType = INT || FLOAT 时生效
        @maxValue = 0:最大值 filterType = INT || FLOAT 时生效
        @length = 200:长度 filterType = INPUT 时生效
        @startDate = null :开始可选时间 filterType = DATE || DATETIME 时生效
        @endDate = null :结束可选时间 filterType = DATE || DATETIME 时生效
    * }
    */
    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) {
        this.initComponent(e);
      },
      deep: !0,
      immediate: !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));
    },
    initTable(e) {
      this.$nextTick(() => {
        this.layoutHeight = this.$refs.layout.offsetHeight - 50, this.setLayoutHeight(), this.pageSize = this.pSize, this.renderColumns = e.map((t) => ((t.template || t.isClick || t.dataIndex === "action" && !t.customRender) && !t.scopedSlots && (t.scopedSlots = { customRender: t.dataIndex }), (t.dataIndex === "action" || t.title === "操作") && (t.fixed = "right"), t));
      });
    },
    initComponent(e = []) {
      this.initTable(e);
    },
    reload() {
      this.$refs.table.refresh(!0);
    },
    // 树列表 - 新增/编辑/详情 时 不刷新
    setFilterParams() {
    },
    // 设置列表路由地址
    setHistoryPath() {
      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: () => B("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((i) => {
        this.setStateBtnItem(i, t);
      });
    },
    setStateBtnItem(e, t) {
      const i = this.renderButtons.find((h) => h.key === e);
      if (!i) {
        console.error(`按钮(${e})未定义, 请确认该变更状态按钮是否设置正确`);
        return;
      }
      Object.keys(t).forEach((h) => {
        i[h] = t[h];
      });
    },
    // 添加方法
    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((i) => i.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, i = this.$refs.tabs && this.$refs.tabs.offsetHeight || 0;
        this.tableScrollPx = this.layoutHeight - t - 103 - i;
      });
    }
  },
  mounted() {
  }
}, z = {
  class: "list-layout",
  ref: "layout"
}, D = { class: "tools" }, E = { class: "title" }, N = { class: "btn-list" }, U = {
  key: 0,
  style: { "margin-left": "8px" }
}, q = {
  key: 0,
  class: "list-filter-wrap",
  ref: "filters"
}, M = { class: "filter-content" }, W = { class: "filter" }, j = {
  key: 0,
  class: "desc-wrap"
}, X = { class: "table-content" }, G = {
  key: 0,
  class: "tabs-wrap",
  ref: "tabs"
}, J = { class: "table-container" }, Q = ["onClick"], Y = { class: "other" };
function Z(e, t, i, h, n, p) {
  const g = F, C = f("SearchOutlined"), v = f("SettingOutlined"), _ = f("s-table"), x = f("setting-filter"), O = f("setting-columns"), $ = I("action");
  return o(), l("div", z, [
    r("div", D, [
      r("div", E, y(i.title), 1),
      r("div", N, [
        (o(!0), l(R, null, S(n.renderButtons, (s) => (o(), l("span", {
          class: "item-btn",
          key: s.key
        }, [
          H((o(), b(g, {
            class: "btn",
            disabled: !!s.disabled,
            type: s.type || s.key === "add" ? "primary" : "default",
            onClick: (a) => p.btnCallback(s)
          }, {
            icon: m(() => [
              p.renderIcon(s) ? (o(), b(K(p.renderIcon(s)), { key: 0 })) : d("", !0)
            ]),
            default: m(() => [
              k(" " + y(s.name), 1)
            ]),
            _: 2
          }, 1032, ["disabled", "type", "onClick"])), [
            [$, s.action || s.key],
            [P, s.show !== !1]
          ])
        ]))), 128)),
        e.$slots.otherBtns ? (o(), l("span", U, [
          u(e.$slots, "otherBtns", { selections: n.selectedRowKeys }, void 0, !0)
        ])) : d("", !0),
        r("span", null, [
          c(g, {
            class: "btn",
            onClick: t[0] || (t[0] = (s) => e.$refs.filter.show(n.renderColumns))
          }, {
            default: m(() => [
              c(C),
              k(" " + y(e.$l("高级搜索")), 1)
            ]),
            _: 1
          }),
          c(g, {
            class: "btn",
            onClick: t[1] || (t[1] = (s) => e.$refs.columns.show(n.renderColumns))
          }, {
            default: m(() => [
              c(v),
              k(" " + y(e.$l("高级表格")), 1)
            ]),
            _: 1
          })
        ])
      ])
    ]),
    r("div", {
      class: "list-layout-main",
      style: w({ height: n.layoutHeight + "px" })
    }, [
      e.$slots.empty ? (o(), l("div", {
        key: 1,
        class: "layout-list-content",
        style: w({ height: n.layoutHeight + "px" })
      }, [
        u(e.$slots, "empty", {}, void 0, !0)
      ], 4)) : (o(), l("div", {
        key: 0,
        class: "layout-list-content",
        style: w({ height: n.layoutHeight + "px" })
      }, [
        e.$slots.filter || e.$slots.desc ? (o(), l("div", q, [
          r("div", M, [
            r("div", W, [
              u(e.$slots, "filter", {}, void 0, !0)
            ])
          ]),
          e.$slots.desc ? (o(), l("div", j, [
            u(e.$slots, "desc", {}, void 0, !0)
          ])) : d("", !0)
        ], 512)) : d("", !0),
        r("div", X, [
          e.$slots.tabs ? (o(), l("div", G, [
            u(e.$slots, "tabs", {}, void 0, !0)
          ], 512)) : d("", !0),
          r("div", J, [
            c(_, {
              ref: "table",
              size: "middle",
              scroll: { y: n.tableScrollPx, x: "100%" },
              pageSize: n.pageSize,
              rowKey: i.rowKey,
              columns: n.renderColumns,
              data: i.loadData,
              "expanded-row-keys": n.expandedRowKeys,
              "onUpdate:expandedRowKeys": t[2] || (t[2] = (s) => n.expandedRowKeys = s),
              rowSelection: n.showSelection || i.isSelection ? { selectedRowKeys: n.selectedRowKeys, onChange: p.onSelectChange } : null,
              showPagination: i.showPagination
            }, L({ _: 2 }, [
              S(n.renderColumns, (s) => ({
                name: "bodyCell",
                fn: m((a) => [
                  s.template && a.column.dataIndex === s.dataIndex ? u(e.$slots, s.dataIndex, {
                    key: 0,
                    text: a.text,
                    record: a.record,
                    item: s
                  }, void 0, !0) : d("", !0),
                  s.isClick && a.column.dataIndex === s.dataIndex ? (o(), l("a", {
                    key: s.dataIndex,
                    onClick: (ee) => p.tableColCallback(s.dataIndex, a.record)
                  }, y(a.text.name), 9, Q)) : d("", !0),
                  a.column.dataIndex === "action" ? u(e.$slots, "action", {
                    key: 2,
                    record: a.record
                  }, void 0, !0) : d("", !0)
                ])
              }))
            ]), 1032, ["scroll", "pageSize", "rowKey", "columns", "data", "expanded-row-keys", "rowSelection", "showPagination"])
          ])
        ])
      ], 4))
    ], 4),
    c(x, { ref: "filter" }, null, 512),
    c(O, {
      ref: "columns",
      pageCode: "demo",
      onReset: t[3] || (t[3] = (s = null) => {
        s && s(n.renderColumns);
      })
    }, null, 512),
    r("div", Y, [
      u(e.$slots, "other", {}, void 0, !0)
    ])
  ], 512);
}
const ie = /* @__PURE__ */ A(V, [["render", Z], ["__scopeId", "data-v-c0bcfa3f"]]);
export {
  ie as default
};