@arco-vue-pro-components/pro-components
Version:
基于@arco-design/web-vue组件的高级组件，包括pro-table
325 lines (324 loc) • 10.1 kB
JavaScript
import { defineComponent, inject, toRef, ref, computed, onMounted, nextTick, watchEffect, watch, toRaw, createVNode, mergeProps, cloneVNode, createTextVNode } from "vue";
import { Form, InputSearch, Space, Popover, Button, FormItem } from "@arco-design/web-vue";
import { IconFindReplace } from "@arco-design/web-vue/es/icon";
import { isEmptyObject } from "../../_utils/is.js";
import { setFields, genColumnKey } from "../utils/index.js";
import { renderFormInput } from "./form-search.js";
import { useI18n } from "../../locale/index.js";
import { getPrefixCls } from "../../_utils/index.js";
import { proTableInjectionKey } from "./context.js";
const rangeType = ["dateRange", "dateTimeRange"];
function getFormFields(info) {
const values = toRaw(info);
const hasValue = Object.keys(values).filter((key) => {
const item = values[key];
if (Array.isArray(item) && item.length === 0) {
return false;
}
if (isEmptyObject(item)) {
return false;
}
return !!item;
});
return hasValue.length;
}
var LightFormSearch = defineComponent({
name: "ProLightSearch",
props: {
columns: {
type: Array,
default: () => []
},
search: {
type: Object,
default: () => ({
rowNumber: 2,
name: "keyword",
search: true
})
},
type: {
type: String,
default: "table"
},
defaultFormData: {
type: Object,
default: () => ({})
},
formSearch: {
type: Object,
default: () => ({})
},
formRef: {
type: Function
}
},
emits: {
submit: (formData, firstLoad) => true,
reset: (formData) => true,
search: (value) => true
},
setup(props, {
slots,
emit
}) {
const {
t
} = useI18n();
const tableCtx = inject(proTableInjectionKey, {});
const columns = toRef(props, "columns");
const lightFormRef = ref();
const defaultFormData = toRef(props, "defaultFormData");
const prefixCls = getPrefixCls("pro-table-light");
const searchConfig = computed(() => {
return {
rowNumber: 2,
name: "keyword",
search: true,
...props.search
};
});
const searchText = ref(void 0);
const visible = ref(false);
const formModel = ref({});
const handleReset = () => {
emit("reset");
};
const onSubmitClick = async () => {
var _a;
const res = await ((_a = lightFormRef.value) == null ? void 0 : _a.validate());
if (!res) {
emit("submit", formModel.value);
visible.value = false;
}
};
const onReset = () => {
var _a;
(_a = lightFormRef.value) == null ? void 0 : _a.resetFields();
searchText.value = void 0;
handleReset();
};
onMounted(() => {
nextTick(() => {
setFields(defaultFormData.value, lightFormRef.value);
});
if (props.type === "table") {
emit("submit", defaultFormData.value, true);
}
});
watchEffect(() => {
if (typeof props.formRef === "function" && lightFormRef.value) {
lightFormRef.value.submit = onSubmitClick;
lightFormRef.value.reset = onReset;
props.formRef(lightFormRef.value);
}
});
const filterNum = ref(0);
watch(formModel, (formModel2) => {
filterNum.value = getFormFields(formModel2);
}, {
deep: true
});
const getFormItemInfo = (item, index) => {
var _a;
const key = genColumnKey(item.key || ((_a = item.dataIndex) == null ? void 0 : _a.toString()), index);
const getTitle = () => {
if (item.title && typeof item.title === "function") {
return item.title(item, "form");
}
return item.title;
};
const title = getTitle();
return {
title,
key
};
};
const columnsList = ref([]);
watch(columns, (columns2) => {
columnsList.value = columns2.filter((item) => {
if (item.hideInSearch && props.type !== "form") {
return false;
}
if (props.type === "form" && item.hideInForm) {
return false;
}
if (!(item.valueType === "index" || item.valueType === "indexBorder") && (item.key || item.dataIndex)) {
return true;
}
return false;
}).sort((a, b) => {
if (a && b) {
return (b.order || 0) - (a.order || 0);
}
if (a && a.order) {
return -1;
}
if (b && b.order) {
return 1;
}
return 0;
}) || [];
}, {
deep: true,
immediate: true
});
const renderPowerContent = () => {
return createVNode("div", {
"class": `${prefixCls}-power-popover`
}, [createVNode("div", {
"class": `${prefixCls}-power-content`
}, [columnsList.value.slice(searchConfig.value.rowNumber).map((item, index) => {
const {
key,
title
} = getFormItemInfo(item, index);
return createVNode(FormItem, {
"field": item.dataIndex,
"key": key,
"label": typeof title === "string" ? title : void 0
}, {
default: () => [cloneVNode(renderFormInput(item, props.type, formModel, lightFormRef, slots, t), {
"modelValue": formModel.value[item.dataIndex],
"onUpdate:modelValue": (value) => {
formModel.value[item.dataIndex] = value;
}
})],
label: () => {
return title;
}
});
}), createVNode("div", {
"class": `${prefixCls}-power-buttons`
}, [createVNode(Button, {
"type": "text",
"disabled": !filterNum.value,
"class": `${prefixCls}-link-btn`,
"onClick": (e) => {
e.stopPropagation();
e.preventDefault();
lightFormRef.value.resetFields();
}
}, {
default: () => [createTextVNode("\u6E05\u7A7A\u641C\u7D22\u6761\u4EF6")]
}), createVNode(Space, null, {
default: () => [createVNode(Button, {
"onClick": () => {
visible.value = false;
},
"type": "outline"
}, {
default: () => [createTextVNode("\u53D6\u6D88")]
}), createVNode(Button, {
"onClick": () => {
onSubmitClick();
},
"type": "primary"
}, {
default: () => [createTextVNode("\u786E\u5B9A")]
})]
})])])]);
};
const render = () => createVNode(Form, {
"model": formModel.value,
"ref": lightFormRef,
"layout": "vertical"
}, {
default: () => [createVNode("div", {
"class": `${prefixCls}-container`
}, [searchConfig.value.search ? createVNode(InputSearch, mergeProps({
"placeholder": t("tableForm.lightInputPlaceholder"),
"buttonText": t("tableForm.lightSearch"),
"style": {
"width": "420px",
"margin-right": "8px"
},
"modelValue": searchText.value,
"onUpdate:modelValue": ($event) => searchText.value = $event,
"defauleValue": props.formSearch[searchConfig.value.name],
"onSearch": (keyword) => {
emit("search", {
[searchConfig.value.name]: keyword
});
},
"onClear": () => {
if (searchConfig.value.clearToSearch) {
emit("search", {
[searchConfig.value.name]: ""
});
}
}
}, typeof searchConfig.value.search === "object" ? searchConfig.value.search || {} : {}, {
"searchButton": true,
"allowClear": true
}), null) : null, createVNode("div", {
"class": `${prefixCls}-right`
}, [createVNode(Space, null, {
default: () => [columnsList.value.length > 0 && columnsList.value.slice(0, searchConfig.value.rowNumber).map((powerItem) => {
const {
key,
title
} = getFormItemInfo(powerItem);
return createVNode("div", {
"key": key
}, [cloneVNode(renderFormInput(powerItem, props.type, formModel, lightFormRef, slots, t), {
"placeholder": rangeType.includes(powerItem.valueType) ? void 0 : title,
"style": {
width: 160
},
"modelValue": props.formSearch[powerItem.dataIndex],
"onUpdate:modelValue": (value) => {
emit("search", {
[powerItem.dataIndex]: value,
[searchConfig.value.name]: searchText.value
});
}
})]);
}), columnsList.value.length <= searchConfig.value.rowNumber ? null : createVNode(Popover, {
"popupVisible": visible.value,
"trigger": "click",
"position": "br",
"showArrow": false,
"unmountOnClose": false,
"popupContainer": tableCtx == null ? void 0 : tableCtx.popupContainer
}, {
default: () => {
return createVNode(Button, {
"type": filterNum.value ? "outline" : "secondary",
"class": {
[`${prefixCls}-power-btn`]: !filterNum.value
},
"onClick": () => {
visible.value = true;
}
}, {
default: () => [createVNode(IconFindReplace, {
"size": 18,
"style": {
"margin-right": "12px"
}
}, null), createTextVNode("\u9AD8\u7EA7\u7B5B\u9009"), filterNum.value ? createVNode("span", {
"style": {
"margin-left": "8px"
}
}, [filterNum.value]) : null]
});
},
content: () => {
return renderPowerContent();
}
})]
})])])]
});
return {
render,
selfSubmit: onSubmitClick,
selfReset: handleReset,
lightFormRef
};
},
render() {
return this.render();
}
});
export { LightFormSearch as default };