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 };