ideaz-element
Version:
<p align="center"> <a href="" target="_blank" rel="noopener noreferrer"> <img src="./docs/public/logo.svg" alt="Ideaz Element" width="180" style="width: 180px;" /> </a> </p>
301 lines (300 loc) • 9.92 kB
JavaScript
import { isVNode as Me, defineComponent as Pe, provide as V, computed as _, toRefs as k, getCurrentInstance as Ae, resolveComponent as E, h as Ue, createVNode as r, mergeProps as i, Fragment as F, withKeys as Ke, withDirectives as L, resolveDirective as M } from "vue";
import { useAttrs as Ze, ElAlert as je, ElButton as w, ElDrawer as Ne, ElWatermark as P } from "element-plus";
import "../../../node_modules/.pnpm/lodash-unified@1.0.3_@types_lodash-es@4.17.12_lodash-es@4.17.21_lodash@4.17.21/node_modules/lodash-unified/import.mjs";
import { Plus as We, Download as qe, Delete as $e } from "@element-plus/icons-vue";
import "../../../utils/index.mjs";
import "../../form/src/hooks/index.mjs";
import "../../table/src/hooks/index.mjs";
import Ie from "../../form/src/FilterForm.mjs";
import Xe from "../../descriptions/src/index.mjs";
import Ye from "../../dialog/src/index.mjs";
import Ge from "../../form/src/BaseForm.mjs";
import He from "../../table/src/Table.mjs";
import "./hooks/index.mjs";
import { crudProps as Je, crudProvideKey as A, EXCLUDE_FORM_PROPS_KEYS as D } from "./props.mjs";
import { useNamespace as Qe } from "../../../hooks/useNamespace.mjs";
import { useLocale as et } from "../../../hooks/useLocale.mjs";
import { useFormSize as tt } from "../../../hooks/useFormSize.mjs";
import { useTableMethods as at } from "../../table/src/hooks/useTableMethods.mjs";
import { useFormMethods as ot } from "../../form/src/hooks/useFormMethods.mjs";
import { useDataRequest as rt } from "./hooks/useDataRequest.mjs";
import { useSelectionData as lt } from "./hooks/useSelectionData.mjs";
import { useFormColumns as nt } from "./hooks/useFormColumns.mjs";
import { useDialogConfig as it } from "./hooks/useDialogConfig.mjs";
import { useDrawerConfig as ut } from "./hooks/useDrawerConfig.mjs";
import { useDescriptions as dt } from "./hooks/useDescriptions.mjs";
import m from "../../../node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/omit.mjs";
import { isFunction as u, isString as ct, isObject as mt } from "../../../utils/is.mjs";
function s(t) {
return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !Me(t);
}
const Ut = /* @__PURE__ */ Pe({
name: "ZCrud",
props: Je,
emits: ["update:formData", "update:pagination", "search", "reset", "refresh", "operate-submit", "operate-delete", "operate-view", "operate-cancel", "sort-change", "update:data", "update:editFormData", "update:addFormData", "update:selectionData", "update:loading", "selection-change", "radio-change"],
setup(t, {
emit: g,
slots: o,
expose: U
}) {
const K = Ze(), {
setCurrentRow: Z,
toggleRowSelection: j,
clearSelection: N,
clearFilter: W,
toggleAllSelection: q,
toggleRowExpansion: $,
clearSort: I,
toggleRadioSelection: X,
sort: Y
} = at(), {
resetFields: G,
validate: H,
validateField: J,
clearValidate: Q,
scrollToField: ee
} = ot(), {
handleSearch: te,
tableProps: f,
handleReset: ae,
handleKeyDown: oe,
handlePaginationChange: re,
handleSortChange: le,
middleFormData: b,
handleRadioChange: ne,
handleExport: ie,
getTableData: S,
isShowDialog: p,
rowData: R,
currentMode: v,
isShowDrawer: z,
refreshAfterRequest: ue
} = rt(t, g), {
selectionData: h,
isSelection: y,
handleCheckboxChange: de,
handleCloseAlert: ce,
handleMultipleDelete: me
} = lt(t, g, f, ue, S), {
addFormColumns: se,
editFormColumns: fe,
searchFormColumns: x,
detailColumns: ve
} = nt(t), {
dialogProps: he,
dialogFormData: T,
dialogForm: ge,
isOperateFormLoading: pe,
handleCancel: De,
handleConfirm: Ce,
handleDialogClosed: Fe,
handleDialogOpen: we
} = it(t, g, v, p, R), {
drawerProps: be,
isDescLoading: Se,
viewData: Re,
handleDrawerOpen: ze
} = ut(t), {
descriptionColumns: ye,
descriptionProps: xe
} = dt(t), d = Qe("crud"), {
t: c
} = et(), n = tt();
V(A, _(() => ({
...k(t),
size: f.value.size
}))), V(A, _(() => ({
...k(t),
size: f.value.size
}))), U({
resetFields: G,
validate: H,
validateField: J,
clearValidate: Q,
scrollToField: ee,
setCurrentRow: Z,
toggleRowSelection: j,
clearSelection: N,
clearFilter: W,
toggleAllSelection: q,
toggleRowExpansion: $,
clearSort: I,
toggleRadioSelection: X,
sort: Y,
getTableData: S
});
const {
proxy: B
} = Ae(), O = (e) => {
const l = ["div", "span", "p", "h1", "h2", "h3", "h4", "h5", "h6"].includes(e.name), C = e.name ? l ? e.name : E(e.name) : E("el-card");
return Ue(C, m(e, ["children", "name"]), l ? e.children() : e.children);
}, Te = () => {
const {
alert: e
} = t;
if (u(e)) return e(h.value);
if (u(o.alert)) return o.alert({
selectionData: h.value
});
const a = m(t.alert, ["title", "description"]);
return r(je, i({
type: "success",
"close-text": c("crud.unselect"),
onClose: ce,
class: d.b("alert")
}, a), {
title: u(e.title) ? () => e.title(h.value, B.$refs.zTableRef) : () => e.title || c("crud.selected") + h.value.length + c("crud.term"),
default: u(e.description) ? () => e.description(h.value, B.$refs.zTableRef) : () => e.description || ""
});
}, Be = () => O({
...t.tableDecorator,
class: d.be("table", "container"),
children: () => r(He, i({
ref: "zTableRef"
}, {
size: n.value,
...f.value
}, {
"onUpdate:pagination": (e) => g("update:pagination", e),
onRefresh: re,
"onSort-change": le,
"onSelection-change": de,
"onRadio-change": ne
}), {
...o,
toolBarLeft: () => {
let e, a, l;
return r(F, null, [o.toolBarLeft && o.toolBarLeft(), t.action && t.add && r(w, {
size: n.value,
type: "primary",
icon: We,
onClick: () => {
v.value = "add", p.value = !0;
}
}, s(e = c("crud.add")) ? e : {
default: () => [e]
}), !!t.export && r(w, {
size: n.value,
type: "primary",
icon: qe,
class: d.e("export"),
onClick: ie
}, s(a = c("crud.export")) ? a : {
default: () => [a]
}), !!y.value && t.delete && t.action && r(w, {
plain: !0,
size: n.value,
type: "danger",
class: d.e("multiple-delete"),
icon: $e,
onClick: me
}, s(l = c("crud.multipleDelete")) ? l : {
default: () => [l]
})]);
},
toolBarBottom: () => {
var e;
return y.value && t.action && t.alert ? Te() : (e = o.toolBarBottom) == null ? void 0 : e.call(o);
}
})
}), Oe = () => {
var e, a;
return ((e = x.value) == null ? void 0 : e.length) > 0 && O({
...t.formDecorator,
style: {
marginBottom: "16px",
...(a = t.formDecorator) == null ? void 0 : a.style
},
class: d.be("filter-form", "container"),
children: () => r(F, null, [u(o.formTop) ? o.formTop() : null, r(Ie, i({
ref: "formRef"
}, {
size: n.value,
labelWidth: "60px",
...m(t.search || {}, D),
columns: x.value,
...K.value,
searchButtonLoading: f.value.loading
}, {
options: t.options,
modelValue: b.value,
"onUpdate:modelValue": (l) => {
b.value = l;
},
onSearch: te,
onReset: ae,
onKeydown: Ke((l) => oe(l), ["enter"])
}), o), u(o.formBottom) ? o.formBottom() : null])
});
}, Ve = () => {
const e = v.value === "add" ? se.value : v.value === "edit" ? fe.value : ve.value, a = m(t.form || {}, D), l = v.value === "add" ? m(t.add || {}, D) : m(t.edit || {}, D);
return L(r(Ge, i({
size: n.value,
labelWidth: "60px",
...a,
...l
}, {
ref: ge,
columns: e,
options: t.options,
modelValue: T.value,
"onUpdate:modelValue": (C) => {
T.value = C;
}
}), o), [[M("loading"), pe.value]]);
}, _e = () => {
let e;
return r(Ye, i({
modelValue: p.value,
"onUpdate:modelValue": (a) => p.value = a
}, he.value, {
onOpen: we,
onClosed: Fe,
onConfirm: Ce,
onCancel: De
}), s(e = Ve()) ? e : {
default: () => [e]
});
}, ke = () => r(Ne, i({
modelValue: z.value,
"onUpdate:modelValue": (e) => z.value = e
}, be.value, {
onOpen: () => ze(R.value)
}), {
default: () => [L(r(Xe, i({
columns: ye.value,
detail: Re.value
}, {
size: n.value,
...xe.value
}), null), [[M("loading"), Se.value]])]
}), Ee = () => u(o.crudMiddle) ? o.crudMiddle() : null, Le = () => {
const e = () => r(F, null, [Oe(), Ee(), Be()]);
if (ct(t.watermark)) {
let a;
return r(P, {
content: t.watermark
}, s(a = e()) ? a : {
default: () => [a]
});
}
if (mt(t.watermark)) {
let a;
return r(P, {
...t.watermark
}, s(a = e()) ? a : {
default: () => [a]
});
}
return e();
};
return () => r("div", {
ref: "crudRef",
class: d.b("")
}, [Le(), _e(), ke()]);
}
});
export {
Ut as default
};
//# sourceMappingURL=Crud.mjs.map