lwx-test-ui
Version:
lwx-test-ui
385 lines (384 loc) • 12.1 kB
JavaScript
import { defineComponent as ye, ref as d, onMounted as be, computed as we, reactive as ke, resolveComponent as m, resolveDirective as Ce, createElementBlock as $, openBlock as r, createElementVNode as w, createBlock as i, createCommentVNode as s, createVNode as c, withCtx as a, unref as k, createTextVNode as p, renderSlot as P, normalizeClass as Te, withDirectives as xe, Fragment as Fe, renderList as Re, createSlots as De } from "vue";
import { Search as Ee, Delete as J, CirclePlus as Se, DArrowRight as Ie } from "@element-plus/icons-vue";
import { useGlobalProperties as Be } from "../../../hooks/use-global-properties/index.js";
import { useRef as $e } from "../../../hooks/use-ref/index.js";
import { ElMessage as F, ElMessageBox as K } from "element-plus";
import { LwxBigDialog as Pe } from "../../big-dialog/index.js";
import Ve from "./components/ElTableRenderJsx.vue.js";
import Ae from "./components/SearchForm.vue.js";
import { tableProEmits as ze, tableProProps as qe } from "./table-pro.js";
const Ne = {
class: "table-pro-box"
}, He = {
class: "table-pro-search"
}, Le = {
class: "table-pro-main"
}, Me = {
class: "table-pro-header table-pro-operate"
}, Oe = {
class: "table-pro-table"
}, Ue = {
key: 0,
class: "table-pro-footer"
}, We = {
class: "dialog-footer"
}, Je = {
class: "dialog-footer"
}, V = "add", A = "edit", C = "info", ot = /* @__PURE__ */ ye({
name: "LwxTablePro",
__name: "table-pro",
props: qe,
emits: ze,
setup(j, {
expose: G,
emit: Q
}) {
const t = j, f = Q, v = Be(), R = d();
be(() => {
t.isDefaultQuery && g();
});
const D = d([]);
function X() {
g();
}
const z = we(() => t.operateType === V ? t.dialogTitle.addTitle : t.operateType === A ? t.dialogTitle.editTitle : t.operateType === C ? t.dialogTitle.infoTitle : "Tips"), E = d(!1), Y = d("加载中..."), u = ke({
total: 0,
currentPage: 1,
pageSize: 10
});
function g() {
E.value = !0;
const e = {
...t.formInline,
page: u.currentPage,
count: u.pageSize
};
v.$request.get(t.queryInterface, e).then((o) => {
var n;
D.value = o.data.records ? o.data.records : o.data, o.data.total ? u.total = Number(o.data.total) : u.total = (n = o.data) == null ? void 0 : n.length;
}).finally(() => {
E.value = !1;
});
}
const q = $e();
function Z() {
var e;
(e = q.value) == null || e.resetFields(), g();
}
const _ = d(!1), h = d({}), T = d(), y = d(!1), S = d([]);
function N() {
x();
}
function H() {
f("update:operateType", V), h.value = JSON.parse(JSON.stringify(t.addForm)), W();
}
function ee() {
var e;
if (!((e = S.value) != null && e.length))
return F.warning("请选择要删除的数据");
K.confirm("确定要删除选中的数据吗？", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
const o = S.value.map((n) => n[t.rowKey]);
ne(o);
}).catch(() => {
});
}
const b = d(!1);
function L(e) {
e.forEach((o) => {
var n;
(n = R.value) == null || n.toggleRowExpansion(o, b.value), o.children && L(o.children);
});
}
function te() {
D.value.forEach((e) => {
var o;
(o = R.value) == null || o.toggleRowExpansion(e, b.value), e.children && e.children.length > 0 && L(e.children);
}), b.value = !b.value;
}
function M() {
var e;
(e = T.value) == null || e.validate().then((o) => {
t.operateType === V ? oe() : t.operateType === A && le(), x();
}).catch((o) => {
console.warn(o);
});
}
function oe() {
y.value = !0, v.$request.post(t.saveInterface, h.value).then((e) => {
F.success("请求成功"), g(), x();
}).finally(() => {
y.value = !1;
});
}
function le() {
y.value = !0, v.$request.put(t.updateInterface, h.value).then((e) => {
F.success("请求成功"), g(), x();
}).finally(() => {
y.value = !1;
});
}
function O(e) {
v.$request.get(`${t.queryInfoInterface}/${e}`, {}).then((o) => {
h.value = o.data, W();
});
}
function ae(e) {
v.$request.delete(`${t.deleteInterface}`, [e]).then((o) => {
F.success("请求成功"), g();
});
}
function ne(e) {
v.$request.delete(`${t.deleteInterface}`, e).then((o) => {
F.success("请求成功"), g();
});
}
function U() {
x();
}
function W() {
_.value = !0, f("update:dialogVisible", !0);
}
function x() {
var e;
(e = T.value) == null || e.resetFields(), _.value = !1, f("update:dialogVisible", !1);
}
const I = {
handleSelectionChange(e) {
S.value = e, f("selectionChange", e);
},
handleRowDblclick(e, o, n) {
f("rowDblclick", e, o, n);
},
handleCurrentChange(e, o) {
f("currentChange", e, o);
}
};
function re(e) {
g();
}
function ie(e) {
f("update:operateType", A), O(e);
}
function de(e) {
f("update:operateType", C), O(e);
}
function se(e) {
K.confirm("是否确实删除该数据?", "系统提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
ae(e);
}).catch(() => {
});
}
return G({
addFormRef: T,
add: () => {
H();
},
editRow: ie,
infoRow: de,
deleteRow: se
}), (e, o) => {
const n = m("el-button"), B = m("el-table-column"), ce = m("el-empty"), ue = m("ElTable"), pe = m("el-pagination"), fe = m("ElForm"), ge = m("el-dialog"), he = m("el-form"), me = Ce("loading");
return r(), $("div", Ne, [w("div", He, [c(Ae, {
ref_key: "searchFormRef",
ref: q,
"form-inline": e.formInline
}, {
search: a((l) => [P(e.$slots, "search", {
formInline: l.formInline
}, void 0, !0)]),
default: a(() => [c(n, {
type: "primary",
icon: k(Ee),
onClick: X
}, {
default: a(() => [p(" 查询 ")]),
_: 1
}, 8, ["icon"]), c(n, {
icon: k(J),
onClick: Z
}, {
default: a(() => [p(" 清空 ")]),
_: 1
}, 8, ["icon"])]),
_: 3
}, 8, ["form-inline"])]), w("div", Le, [w("div", Me, [t.showAddBtn ? (r(), i(n, {
key: 0,
icon: k(Se),
type: "primary",
onClick: H
}, {
default: a(() => [p(" 新增 ")]),
_: 1
}, 8, ["icon"])) : s("", !0), t.showBatchDelBtn ? (r(), i(n, {
key: 1,
icon: k(J),
type: "danger",
onClick: ee
}, {
default: a(() => [p(" 删除 ")]),
_: 1
}, 8, ["icon"])) : s("", !0), t.showFoldBtn ? (r(), i(n, {
key: 2,
icon: k(Ie),
style: {
transition: "all 0.3s ease"
},
class: Te({
"table-pro-operate-fold": b.value,
"table-pro-operate-expend": !b.value
}),
onClick: te
}, {
default: a(() => [p(" 折叠 ")]),
_: 1
}, 8, ["icon", "class"])) : s("", !0)]), w("div", Oe, [xe((r(), i(ue, {
ref_key: "tableRef",
ref: R,
"row-key": t.rowKey,
style: {
height: "100%"
},
"element-loading-text": Y.value,
"tree-props": t.treeProps,
"default-expand-all": t.defaultExpandAll,
data: D.value,
border: "",
onSelectionChange: I.handleSelectionChange,
onRowDblclick: I.handleRowDblclick,
onCurrentChange: I.handleCurrentChange
}, {
empty: a(() => [c(ce, {
description: "暂无数据"
})]),
default: a(() => [t.showSelection ? (r(), i(B, {
key: 0,
type: "selection",
width: "55",
align: "center"
})) : s("", !0), t.showIndex ? (r(), i(B, {
key: 1,
type: "index",
label: "序号",
width: "55",
align: "center"
})) : s("", !0), (r(!0), $(Fe, null, Re(e.columns, (l, ve) => (r(), i(B, {
key: ve,
prop: l.prop,
label: l.label,
align: l.align || "center",
"show-overflow-tooltip": (l == null ? void 0 : l.overflowShow) || !0,
"min-width": l.minWidth,
fixed: l.fixed,
width: l.width
}, De({
_: 2
}, [l != null && l.render ? {
name: "default",
fn: a((_e) => [c(Ve, {
row: l,
scope: _e
}, null, 8, ["row", "scope"])]),
key: "0"
} : void 0]), 1032, ["prop", "label", "align", "show-overflow-tooltip", "min-width", "fixed", "width"]))), 128))]),
_: 1
}, 8, ["row-key", "element-loading-text", "tree-props", "default-expand-all", "data", "onSelectionChange", "onRowDblclick", "onCurrentChange"])), [[me, E.value]])]), t.showPagination ? (r(), $("div", Ue, [c(pe, {
"page-size": u.pageSize,
"onUpdate:pageSize": o[0] || (o[0] = (l) => u.pageSize = l),
"current-page": u.currentPage,
"onUpdate:currentPage": o[1] || (o[1] = (l) => u.currentPage = l),
background: "",
layout: "total, sizes, prev, pager, next, jumper",
"pager-count": 5,
"page-sizes": [10, 20, 30, 40, 50, 100, 200],
total: u.total,
onChange: re
}, null, 8, ["page-size", "current-page", "total"])])) : s("", !0)]), t.dialogType === "dialog" ? (r(), i(ge, {
key: 0,
modelValue: _.value,
"onUpdate:modelValue": o[2] || (o[2] = (l) => _.value = l),
title: z.value,
width: t.dialogWidth,
top: t.dialogTop,
draggable: "",
onClose: N
}, {
footer: a(() => [w("div", We, [c(n, {
onClick: U
}, {
default: a(() => [p(" 取消 ")]),
_: 1
}), t.operateType !== C ? (r(), i(n, {
key: 0,
type: "primary",
loading: y.value,
onClick: M
}, {
default: a(() => [p(" 确定 ")]),
_: 1
}, 8, ["loading"])) : s("", !0)])]),
default: a(() => [c(fe, {
ref_key: "addFormRef",
ref: T,
"status-icon": "",
"label-width": t.labelWidth,
disabled: t.operateType === C,
model: h.value,
rules: t.rules
}, {
default: a(() => [P(e.$slots, "add", {
addForm: h.value
}, void 0, !0)]),
_: 3
}, 8, ["label-width", "disabled", "model", "rules"])]),
_: 3
}, 8, ["modelValue", "title", "width", "top"])) : s("", !0), t.dialogType === "big-dialog" ? (r(), i(k(Pe), {
key: 1,
modelValue: _.value,
"onUpdate:modelValue": o[3] || (o[3] = (l) => _.value = l),
title: z.value,
onClose: N
}, {
footer: a(() => [w("div", Je, [c(n, {
onClick: U
}, {
default: a(() => [p(" 取消 ")]),
_: 1
}), t.operateType !== C ? (r(), i(n, {
key: 0,
type: "primary",
loading: y.value,
onClick: M
}, {
default: a(() => [p(" 确定 ")]),
_: 1
}, 8, ["loading"])) : s("", !0)])]),
default: a(() => [c(he, {
ref_key: "addFormRef",
ref: T,
"status-icon": "",
"label-width": t.labelWidth,
disabled: t.operateType === C,
model: h.value,
rules: t.rules
}, {
default: a(() => [P(e.$slots, "add", {
addForm: h.value
}, void 0, !0)]),
_: 3
}, 8, ["label-width", "disabled", "model", "rules"])]),
_: 3
}, 8, ["modelValue", "title"])) : s("", !0)]);
};
}
});
export {
ot as default
};