@cmstops/pro-compo
Version:
[物料平台文档中心](https://arco.design/docs/material/guide)
114 lines (113 loc) • 4.33 kB
JavaScript
import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, createVNode, unref, withCtx, createCommentVNode, withDirectives, createBlock, createTextVNode, toDisplayString, vShow, renderSlot } from "vue";
import { ButtonGroup, Button } from "@arco-design/web-vue";
import { IconCaretDown } from "@arco-design/web-vue/es/icon";
const _hoisted_1 = { class: "filter-item-view" };
const _hoisted_2 = { class: "show-view" };
const _hoisted_3 = { class: "right-prefix" };
const _hoisted_4 = { class: "right-prefix" };
const _hoisted_5 = { class: "right-prefix" };
const _hoisted_6 = { class: "select-view" };
const _sfc_main = defineComponent({
__name: "FilterItem",
props: {
value: { default: "" },
allValue: { default: "" },
label: { default: "" },
options: { default: () => [] },
icon: { default: "" },
rightIcon: { default: "" },
datePicker: { type: Boolean, default: false },
backgroundColor: { default: "none" }
},
setup(__props) {
const props = __props;
const hasValue = computed(() => {
if (props.allValue !== "" && props.value === props.allValue)
return false;
if (Array.isArray(props.value))
return props.value.length > 0;
return props.value;
});
const valueItem = computed(() => {
return props.options.find((item) => item.value === props.value);
});
const arrValue = computed(() => {
if (!Array.isArray(props.value))
return "";
return props.value.map((item) => {
if (props.datePicker)
return timeFilter(item);
return item.alias || item.title || item.label;
}).join(" / ");
});
function timeFilter(timeValue) {
if (!timeValue)
return "";
if (typeof timeValue === "number" && String(timeValue).length === 10) {
timeValue *= 1e3;
}
const date = new Date(timeValue);
return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
}
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", _hoisted_1, [
createElementVNode("div", _hoisted_2, [
createVNode(unref(ButtonGroup), {
type: "primary",
size: "medium"
}, {
default: withCtx(() => [
createCommentVNode(" \u666E\u901A\u503C "),
valueItem.value ? withDirectives((openBlock(), createBlock(unref(Button), {
key: 0,
class: "hasvalue-btn"
}, {
default: withCtx(() => [
createElementVNode("span", _hoisted_3, [
createTextVNode(toDisplayString(valueItem.value.label) + " ", 1),
createVNode(unref(IconCaretDown))
])
]),
_: 1
}, 512)), [
[vShow, hasValue.value]
]) : createCommentVNode("v-if", true),
createCommentVNode(" \u6570\u7EC4\u503C "),
arrValue.value ? withDirectives((openBlock(), createBlock(unref(Button), {
key: 1,
class: "hasvalue-btn"
}, {
default: withCtx(() => [
createElementVNode("span", _hoisted_4, [
createTextVNode(toDisplayString(arrValue.value) + " ", 1),
createVNode(unref(IconCaretDown))
])
]),
_: 1
}, 512)), [
[vShow, hasValue.value]
]) : createCommentVNode("v-if", true),
createCommentVNode(" \u672A\u8FDB\u884C\u9009\u62E9\u65F6\u5C55\u793A "),
withDirectives(createVNode(unref(Button), { type: "secondary" }, {
default: withCtx(() => [
createElementVNode("span", _hoisted_5, [
createTextVNode(toDisplayString(_ctx.label) + " ", 1),
createVNode(unref(IconCaretDown))
])
]),
_: 1
}, 512), [
[vShow, !hasValue.value]
])
]),
_: 1
})
]),
createElementVNode("div", _hoisted_6, [
renderSlot(_ctx.$slots, "default")
])
]);
};
}
});
export { _sfc_main as default };