@wetspace/pro-components
Version:
::: tip 基本介绍
238 lines (237 loc) • 7.69 kB
JavaScript
import { defineComponent as w, shallowRef as B, computed as D, ref as x, watch as z, onMounted as M, openBlock as v, createElementBlock as y, normalizeClass as s, unref as e, createElementVNode as c, createVNode as u, withCtx as d, createTextVNode as _, toDisplayString as O, createCommentVNode as h, createBlock as S, Fragment as $, renderList as A } from "vue";
import L from "./schema.vue.mjs";
import { useNamespace as R, ElText as V, ElButton as C, ElSpace as q, ElIcon as G, ElForm as H, ElFormItem as J } from "element-plus";
import { DCaret as K, CircleCloseFilled as Q, CirclePlusFilled as U } from "../../node_modules/.pnpm/@element-plus_icons-vue@2.3.1_vue@3.5.12_typescript@5.4.2_/node_modules/@element-plus/icons-vue/dist/index.mjs";
import { wetConditionFliterFormProps as W } from "./types.mjs";
const oe = /* @__PURE__ */ w({
__name: "condition-fliter-form",
props: W,
emits: ["update:modelValue", "change", "update:conjunction"],
setup(b, { emit: k }) {
const r = R("condition-fliter-form"), i = k, a = b, m = B(!1), E = D(() => [
{
title: "",
property: "property",
valueType: "select",
valueEnum: (a.condition || []).map((l) => ({
label: l.label,
value: l.property
})),
formInputProps: {
placeholder: "请选择筛选项",
onChange() {
m.value = !0;
}
}
},
{
title: "",
property: "opreator",
valueType: "select",
formInputProps: {
disabled: !0,
placeholder: "请选择操作符",
onChange() {
m.value = !0;
}
},
dependency: {
relyprops: ["property"],
dependencyChange({ relyValues: l, setValue: o }) {
const n = (a.condition || []).find((t) => t.property === l);
return n ? (m.value && (o("opreator", n.opreator[0]), setTimeout(() => {
m.value = !1;
}, 100)), {
formInputProps: {
disabled: !1,
options: n.opreator.map((t) => ({
label: a.opreatorsMap[t],
value: t
}))
}
}) : null;
}
}
},
{
title: "",
property: "value",
formInputProps: {
placeholder: "目标值",
disabled: !0
},
valueEnum: ["111", "222"],
dependency: {
relyprops: ["property", "opreator"],
dependencyChange({ relyValues: l, setValue: o }) {
const n = (a.condition || []).find((t) => t.property === l[0]);
return n ? (m.value && (console.log("条件值触发设置"), o("value", void 0), setTimeout(() => {
m.value = !1;
}, 100)), {
valueType: n.valueType,
formInputProps: {
...n.formInputProps,
disabled: !l[1],
placeholder: "目标值"
}
}) : null;
}
}
}
]), p = x(), g = () => {
(a.modelValue || []).forEach((l, o) => {
const n = (/* @__PURE__ */ new Date()).getTime() + o;
p.value || (p.value = {}), p.value[o] = n;
});
}, T = () => {
const l = a.modelValue || [];
p.value[l.length] = (/* @__PURE__ */ new Date()).getTime(), l.push({
property: "",
opreator: "",
value: void 0
}), i("update:modelValue", l), i("change", l);
}, I = (l) => {
const o = Object.values(p.value);
o.splice(l, 1), o.forEach((t, f) => {
p.value[f] = t;
});
const n = a.modelValue.filter((t, f) => l !== f);
console.log(p.value), i("update:modelValue", n), i("change", n);
};
z(() => a.modelValue, (l) => {
l && !p.value && g();
});
const F = () => {
i("update:modelValue", []), i("change", []);
}, N = (l, o, n) => {
const t = a.modelValue || [];
t[l] = n, i("update:modelValue", t), i("change", t);
}, P = () => {
a.conjunction === "and" ? i("update:conjunction", "or") : i("update:conjunction", "and");
};
return M(() => {
g();
}), (l, o) => (v(), y("div", {
class: s([e(r).b()])
}, [
c("div", {
class: s(e(r).e("hd"))
}, [
u(e(V), { tag: "b" }, {
default: d(() => o[1] || (o[1] = [
_(" 设置筛选条件 ")
])),
_: 1
})
], 2),
c("div", {
class: s(e(r).e("body"))
}, [
a.modelValue && a.modelValue.length > 1 ? (v(), y("div", {
key: 0,
class: s(e(r).e("body__hd"))
}, [
c("div", {
class: s([e(r).e("body__hd-r"), e(r).is("t")])
}, null, 2),
c("div", null, [
u(e(C), {
link: "",
size: "small",
onClick: o[0] || (o[0] = () => P())
}, {
default: d(() => [
u(e(q), null, {
default: d(() => [
u(e(V), {
type: "info",
size: "small"
}, {
default: d(() => [
_(O(a.conjunction === "and" ? "且" : "或"), 1)
]),
_: 1
}),
u(e(G), null, {
default: d(() => [
u(e(K))
]),
_: 1
})
]),
_: 1
})
]),
_: 1
})
]),
c("div", {
class: s([e(r).e("body__hd-r"), e(r).is("b")])
}, null, 2),
o[2] || (o[2] = c("div", { style: { height: "20px", flex: "0 0 auto" } }, null, -1))
], 2)) : h("", !0),
c("div", {
class: s(e(r).e("body__conent"))
}, [
p.value ? (v(), S(e(H), { key: 0 }, {
default: d(() => [
(v(!0), y($, null, A(a.modelValue, (n, t) => (v(), y("div", {
key: p.value[t],
class: s(e(r).e("condition-item"))
}, [
u(L, {
"initial-values": n,
span: 8,
prop: `${t}`,
properties: E.value,
style: { flex: "1" },
onChange: (f, j) => N(t, f, j)
}, null, 8, ["initial-values", "prop", "properties", "onChange"]),
u(e(J), null, {
default: d(() => [
u(e(C), {
icon: e(Q),
link: "",
type: "info",
onClick: () => I(t)
}, null, 8, ["icon", "onClick"])
]),
_: 2
}, 1024)
], 2))), 128))
]),
_: 1
})) : h("", !0)
], 2)
], 2),
c("div", {
class: s(e(r).e("footer"))
}, [
u(e(C), {
type: "primary",
link: "",
icon: e(U),
onClick: T
}, {
default: d(() => o[3] || (o[3] = [
_(" 添加筛选条件 ")
])),
_: 1
}, 8, ["icon"]),
u(e(C), {
type: "info",
link: "",
onClick: F
}, {
default: d(() => o[4] || (o[4] = [
_(" 清空全部条件 ")
])),
_: 1
})
], 2)
], 2));
}
});
export {
oe as default
};