@fmdevui/fm-dev
Version:
Page level components developed based on Element Plus.
238 lines (235 loc) • 7.96 kB
JavaScript
import { defineComponent, ref, watch, resolveComponent, createBlock, createCommentVNode, openBlock, withCtx, createElementVNode, createVNode, toDisplayString, createTextVNode, createElementBlock, Fragment, renderList, unref } from 'vue';
import { ArrowDown } from '@element-plus/icons-vue';
const _hoisted_1 = { class: "inside_box" };
const _hoisted_2 = { class: "inside_box_title" };
const _hoisted_3 = { class: "check-box" };
const _hoisted_4 = { class: "more_dropdown_icon" };
const _hoisted_5 = { class: "out_box" };
var _sfc_main = /* @__PURE__ */ defineComponent({
...{
name: "MoreChoose"
},
__name: "moreChoose",
props: {
// 以下拉方式展示更多条件---数据源
moreCheckList: {
type: Array,
default: () => []
},
popoverAttrsBind: {
type: Object,
default: () => ({})
}
},
emits: ["getCheckList"],
setup(__props, { emit: __emit }) {
const props = __props;
const checkList = ref([]);
const isCheckList = ref([]);
const allcheckList = ref(props.moreCheckList);
const emit = __emit;
watch(
() => props.moreCheckList,
(list) => {
allcheckList.value = list;
},
{ deep: true }
);
watch(
() => checkList,
(nval, oval) => {
let list = [];
oval.value.forEach((ele) => {
if (!nval.value.some((val) => val == ele)) {
list.push(ele);
}
});
isCheckList.value.forEach((ele, j) => {
if (list.filter((val) => val == ele.label)[0]) {
delete isCheckList.value[j];
}
});
},
{ deep: true }
);
const handlecheckAll = () => {
const allList = JSON.parse(JSON.stringify(allcheckList.value));
checkList.value = allList.map((item) => item.label);
isCheckList.value = allList;
const checkObj = analysisObj(isCheckList.value);
emit("getCheckList", checkObj);
};
const handleReverseCheck = () => {
const deepCheckList = JSON.parse(JSON.stringify(checkList.value));
checkList.value = [];
isCheckList.value = [];
allcheckList.value.forEach((ele) => {
if (!deepCheckList.filter((item1) => item1 == ele.label)[0]) {
checkList.value.push(ele.label);
isCheckList.value.push(ele);
}
});
const checkObj = analysisObj(isCheckList.value);
emit("getCheckList", checkObj);
};
const handleReset = () => {
checkList.value = [];
isCheckList.value = [];
emit("getCheckList", {});
};
const getcheck = (val) => {
isCheckList.value = [];
allcheckList.value.forEach((ele, j) => {
if (val.filter((item1) => item1 == ele.label)[0]) {
isCheckList.value.push(ele);
}
});
const checkObj = analysisObj(isCheckList.value);
emit("getCheckList", checkObj);
};
const analysisObj = (val) => {
return val.reduce((obj, item) => {
obj[item.prop] = {
label: item?.label,
comp: item.comp,
bind: item?.bind,
list: item?.list,
eventHandle: item?.eventHandle,
changeEvent: item?.changeEvent,
listTypeInfo: item?.listTypeInfo,
arrLabel: item?.arrLabel,
arrKey: item?.arrKey,
slotName: item?.slotName,
span: item?.span,
type: item?.type,
isSelfCom: item && item.isSelfCom || false,
defaultVal: item?.defaultVal,
placeholder: item?.placeholder,
event: item?.event
};
return obj;
}, {});
};
return (_ctx, _cache) => {
const _component_el_button = resolveComponent("el-button");
const _component_el_checkbox = resolveComponent("el-checkbox");
const _component_el_checkbox_group = resolveComponent("el-checkbox-group");
const _component_el_icon = resolveComponent("el-icon");
const _component_el_popover = resolveComponent("el-popover");
return allcheckList.value.length > 0 ? (openBlock(), createBlock(_component_el_popover, {
key: 0,
"popper-class": "fm_query_condition_more",
bind: __props.popoverAttrsBind,
trigger: "click",
width: "auto",
ref: "popover"
}, {
reference: withCtx(() => [
createElementVNode("div", _hoisted_4, [
createElementVNode(
"span",
_hoisted_5,
toDisplayString(__props.popoverAttrsBind.showTxt || "\u66F4\u591A"),
1
/* TEXT */
),
createVNode(_component_el_icon, null, {
default: withCtx(() => [
createVNode(unref(ArrowDown))
]),
_: 1
/* STABLE */
})
])
]),
default: withCtx(() => [
createElementVNode("div", _hoisted_1, [
createElementVNode("div", _hoisted_2, [
createElementVNode(
"div",
null,
toDisplayString(__props.popoverAttrsBind.title || "\u6240\u6709\u6761\u4EF6"),
1
/* TEXT */
),
createElementVNode("div", _hoisted_3, [
createVNode(_component_el_button, {
size: "small",
link: "",
onClick: handlecheckAll
}, {
default: withCtx(() => [
createTextVNode(
toDisplayString(__props.popoverAttrsBind.allTxt || "\u5168\u9009"),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
}),
createVNode(_component_el_button, {
size: "small",
link: "",
onClick: handleReset
}, {
default: withCtx(() => [
createTextVNode(
toDisplayString(__props.popoverAttrsBind.clearTxt || "\u6E05\u7A7A"),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
}),
createVNode(_component_el_button, {
size: "small",
link: "",
onClick: handleReverseCheck
}, {
default: withCtx(() => [
createTextVNode(
toDisplayString(__props.popoverAttrsBind.reverseTxt || "\u53CD\u9009"),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
})
])
]),
createVNode(_component_el_checkbox_group, {
modelValue: checkList.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => checkList.value = $event),
class: "inside_box_main",
onChange: getcheck
}, {
default: withCtx(() => [
(openBlock(true), createElementBlock(
Fragment,
null,
renderList(allcheckList.value, (item, index) => {
return openBlock(), createBlock(_component_el_checkbox, {
key: index,
label: item.label,
value: item.label
}, null, 8, ["label", "value"]);
}),
128
/* KEYED_FRAGMENT */
))
]),
_: 1
/* STABLE */
}, 8, ["modelValue"])
])
]),
_: 1
/* STABLE */
}, 8, ["bind"])) : createCommentVNode("v-if", true);
};
}
});
export { _sfc_main as default };