@cmstops/pro-compo
Version:
[物料平台文档中心](https://arco.design/docs/material/guide)
300 lines (299 loc) • 13.4 kB
JavaScript
import { defineComponent, ref, computed, watch, nextTick, toRaw, openBlock, createElementBlock, Fragment, createElementVNode, withModifiers, createVNode, withCtx, renderList, createBlock, renderSlot, unref, createTextVNode, toDisplayString, normalizeStyle, createCommentVNode } from "vue";
import { InputGroup, Select, Option, Input, InputSearch, RangePicker, RadioGroup, Radio } from "@arco-design/web-vue";
import _sfc_main$2 from "./components/filterItem.js";
import _sfc_main$1 from "./components/FilterGroup.js";
const _sfc_main = defineComponent({
...{ name: "baseFilter" },
__name: "component",
props: {
BASE_API: {},
columns: {},
formatQuery: { type: Boolean }
},
emits: ["search", "selectSearch", "selectPopupChange"],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emit = __emit;
const render = ref(false);
const form = ref({});
const columnsKeys = computed(() => props.columns.map((column) => column.key));
const columnsMap = computed(() => {
const columnsArr = JSON.parse(JSON.stringify(props.columns));
const map = columnsArr.reduce((map2, column) => {
map2[column.key] = column;
return map2;
}, {});
return map;
});
const renderColumns = computed(() => {
const columnsArr = JSON.parse(JSON.stringify(props.columns));
let rangeKeys = columnsArr.filter((column) => column.range).map((column) => column.range);
rangeKeys = [...new Set(rangeKeys)];
const _columns = columnsArr.filter((column) => !column.range);
rangeKeys.forEach((key) => {
const rangeItem = columnsArr.filter((column) => column.range === key);
rangeItem[0].key = key;
_columns.push(rangeItem[0]);
});
return _columns;
});
const getOptions = computed(() => {
return (item) => {
return item.options ? item.options : [];
};
});
const hasValue = computed(() => {
return (key) => {
var _a, _b;
if (form.value[key] && typeof form.value[key] === "object" && Object.prototype.hasOwnProperty.call(form.value[key], "range")) {
return ((_a = form.value[key].range) == null ? void 0 : _a.length) > 0;
}
const diff = form.value[key] !== ((_b = columnsMap.value[key]) == null ? void 0 : _b.defaultValue);
console.log("hasValue", key, form.value[key], diff);
if (form.value[key] !== "" && diff) {
return true;
}
return false;
};
});
const styleWidth = (item) => {
if (typeof item === "object" && Object.prototype.hasOwnProperty.call(item, "range")) {
return item.width ? item.width : "260px";
}
return item.width ? item.width : "150px";
};
const renderForm = () => {
const _form = {};
const rangeTemp = {};
const columnsArr = JSON.parse(JSON.stringify(props.columns));
columnsArr.forEach((column) => {
if (column.range) {
if (!rangeTemp[column.range]) {
rangeTemp[column.range] = { range: [] };
}
if (column.width) {
rangeTemp[column.range].width = column.width;
}
rangeTemp[column.range][column.key] = column.defaultValue || "";
_form[column.range] = rangeTemp[column.range];
} else if (column.component === "select") {
_form[column.key] = column.defaultValue || null;
} else if (column.component === "input-group") {
_form[column.selectKey] = column.selectDefaultValue || "";
_form[column.inputKey] = column.inputDefaultValue || "";
} else if (column.component) {
_form[column.key] = column.defaultValue || "";
}
});
render.value = true;
form.value = _form;
};
const handleSelectChange = (value, item) => {
if (value === "") {
form.value[item.key] = null;
}
};
const handleSelectSearch = (value, item) => {
emit("selectSearch", { value, item });
};
const handleSelectPopupChange = (value, item) => {
emit("selectPopupChange", { value, item });
};
const resetFilter = () => {
form.value = {};
renderForm();
};
const formMatte = (_form) => {
Object.keys(_form).forEach((key) => {
if (_form[key] && typeof _form[key] === "object" && Object.prototype.hasOwnProperty.call(_form[key], "range")) {
Object.keys(_form[key]).forEach((k, index) => {
var _a;
const _time = ((_a = _form[key]) == null ? void 0 : _a.range) || {};
if (k !== "range" && k !== "width" && _time[index - 1]) {
_form[k] = Math.floor(_time[index - 1] / 1e3);
}
});
}
});
const _parmas = { ..._form };
Object.keys(_parmas).forEach((key) => {
if (_parmas[key] && typeof _parmas[key] === "object" && Object.prototype.hasOwnProperty.call(_parmas[key], "range")) {
delete _parmas[key];
}
if (_parmas[key] === null || _parmas[key] === void 0) {
delete _parmas[key];
}
});
Object.keys(_parmas).forEach((key) => {
var _a;
if (_parmas[key] === ((_a = columnsMap.value[key]) == null ? void 0 : _a.defaultValue)) {
delete _parmas[key];
}
});
if (props.formatQuery) {
const _parmasStr = Object.keys(_parmas).map((key) => {
return `${key}=${_parmas[key]}`;
}).join("&");
return _parmasStr;
}
return _parmas;
};
const filterGroup = ref();
watch(
() => columnsKeys.value,
() => {
renderForm();
nextTick(() => {
var _a;
(_a = filterGroup.value) == null ? void 0 : _a.refreshPanel();
});
},
{ immediate: true }
);
watch(
() => form.value,
() => {
emit("search", formMatte(toRaw({ ...form.value })));
},
{ deep: true }
);
__expose({
refreshPanel: () => {
var _a;
return (_a = filterGroup.value) == null ? void 0 : _a.refreshPanel();
},
resetFilter
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock(Fragment, null, [
createElementVNode("div", {
id: "base-filter-popup-container",
style: { "position": "relative", "z-index": "10000" },
onClick: _cache[0] || (_cache[0] = withModifiers(() => {
}, ["stop"]))
}),
createVNode(_sfc_main$1, {
ref_key: "filterGroup",
ref: filterGroup
}, {
left: withCtx(() => [
(openBlock(true), createElementBlock(Fragment, null, renderList(renderColumns.value, (item, index) => {
return openBlock(), createBlock(_sfc_main$2, {
key: index,
active: hasValue.value(item.key)
}, {
default: withCtx(() => [
item.slot ? renderSlot(_ctx.$slots, item.slot, { key: 0 }) : item.component === "input-group" ? (openBlock(), createBlock(unref(InputGroup), { key: 1 }, {
default: withCtx(() => [
createVNode(unref(Select), {
modelValue: form.value[item.selectKey],
"onUpdate:modelValue": ($event) => form.value[item.selectKey] = $event,
"default-active-first-option": "",
style: { "width": "100px" }
}, {
default: withCtx(() => [
(openBlock(true), createElementBlock(Fragment, null, renderList(item.selectOptions, (option, idx) => {
return openBlock(), createBlock(unref(Option), {
key: idx,
value: option.value
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(option.label), 1)
]),
_: 2
}, 1032, ["value"]);
}), 128))
]),
_: 2
}, 1032, ["modelValue", "onUpdate:modelValue"]),
createVNode(unref(Input), {
modelValue: form.value[item.inputKey],
"onUpdate:modelValue": ($event) => form.value[item.inputKey] = $event,
placeholder: item.placeholder ? item.placeholder : `\u8BF7\u8F93\u5165${item.inputLabel}`,
style: { "width": "180px" }
}, null, 8, ["modelValue", "onUpdate:modelValue", "placeholder"])
]),
_: 2
}, 1024)) : item.component === "input" ? (openBlock(), createBlock(unref(InputSearch), {
key: 2,
modelValue: form.value[item.key],
"onUpdate:modelValue": ($event) => form.value[item.key] = $event,
style: normalizeStyle({ width: styleWidth(columnsMap.value[item.key]) }),
"allow-clear": "",
size: "medium",
placeholder: item.placeholder ? item.placeholder : `\u8BF7\u8F93\u5165${item.label}`
}, null, 8, ["modelValue", "onUpdate:modelValue", "style", "placeholder"])) : createCommentVNode("v-if", true),
item.component === "select" ? (openBlock(), createBlock(unref(Select), {
key: 3,
modelValue: form.value[item.key],
"onUpdate:modelValue": ($event) => form.value[item.key] = $event,
"popup-container": "#base-filter-popup-container",
"allow-clear": "",
"allow-search": item.allowSearch,
"default-active-first-option": false,
style: normalizeStyle({ width: styleWidth(columnsMap.value[item.key]) }),
placeholder: item.placeholder ? item.placeholder : `\u8BF7\u9009\u62E9${item.label}`,
onSearch: ($event) => handleSelectSearch($event, item),
onPopupVisibleChange: ($event) => handleSelectPopupChange($event, item),
onChange: ($event) => handleSelectChange($event, item)
}, {
default: withCtx(() => [
(openBlock(true), createElementBlock(Fragment, null, renderList(getOptions.value(item), (opt) => {
return openBlock(), createBlock(unref(Option), {
key: opt.value,
label: opt.label,
value: opt.value
}, null, 8, ["label", "value"]);
}), 128))
]),
_: 2
}, 1032, ["modelValue", "onUpdate:modelValue", "allow-search", "style", "placeholder", "onSearch", "onPopupVisibleChange", "onChange"])) : createCommentVNode("v-if", true),
item.component === "range-picker" ? (openBlock(), createBlock(unref(RangePicker), {
key: 4,
modelValue: form.value[item.key].range,
"onUpdate:modelValue": ($event) => form.value[item.key].range = $event,
style: normalizeStyle({ width: styleWidth(form.value[item.key]) }),
"time-picker-props": {
defaultValue: ["00:00:00", "23:59:59"]
},
"value-format": "timestamp",
"popup-container": "#base-filter-popup-container",
onClick: _cache[1] || (_cache[1] = withModifiers(() => {
}, ["stop"]))
}, null, 8, ["modelValue", "onUpdate:modelValue", "style"])) : createCommentVNode("v-if", true),
item.component === "radio" ? (openBlock(), createBlock(unref(RadioGroup), {
key: 5,
modelValue: form.value[item.key],
"onUpdate:modelValue": ($event) => form.value[item.key] = $event,
type: "button"
}, {
default: withCtx(() => [
(openBlock(true), createElementBlock(Fragment, null, renderList(item.options || [], (option, idx) => {
return openBlock(), createBlock(unref(Radio), {
key: idx,
value: option.value
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(option.label), 1)
]),
_: 2
}, 1032, ["value"]);
}), 128))
]),
_: 2
}, 1032, ["modelValue", "onUpdate:modelValue"])) : createCommentVNode("v-if", true)
]),
_: 2
}, 1032, ["active"]);
}), 128))
]),
right: withCtx(() => [
renderSlot(_ctx.$slots, "right")
]),
_: 3
}, 512)
], 64);
};
}
});
export { _sfc_main as default };