@arco-vue-pro-components/pro-components
Version:
基于@arco-design/web-vue组件的高级组件，包括pro-table
442 lines (441 loc) • 13.6 kB
JavaScript
import { defineComponent, toRef, ref, computed, onMounted, watchEffect, watch, createVNode, isVNode, mergeProps, Fragment, cloneVNode } from "vue";
import { Form, Input, DatePicker, RangePicker, TimePicker, Textarea, CheckboxGroup, RadioGroup, Switch, Upload, Grid, GridItem, FormItem, Button, Space } from "@arco-design/web-vue";
import { IconDown } from "@arco-design/web-vue/es/icon";
import ProSelect from "../../pro-select/index.js";
import ProInputNumber from "../../pro-input-number/index.js";
import { useI18n } from "../../locale/index.js";
import { parsingValueEnumToArray, ObjToMap, runFunction, genColumnKey } from "../utils/index.js";
import { getPrefixCls } from "../../_utils/index.js";
function _isSlot(s) {
return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
}
const inputDecimalTypes = ["digit", "decimal", "money", "percent"];
const renderFormInput = (item, type, formModel, formRef, slots, t) => {
var _a;
const data = {
item,
formModel,
formRef,
type
};
if (item.renderFormItem) {
return item.renderFormItem(data);
}
if (item.formSlotName && (slots == null ? void 0 : slots[item.formSlotName])) {
return (_a = slots[item.formSlotName]) == null ? void 0 : _a.call(slots, data)[0];
}
const valueType = typeof item.valueType === "function" ? item.valueType({}) : item.valueType;
let options = [];
if (item.valueEnum) {
options = parsingValueEnumToArray(ObjToMap(runFunction(item.valueEnum, data)));
}
if (!valueType || valueType === "text") {
const {
valueEnum
} = item;
if (valueEnum) {
return createVNode(ProSelect, mergeProps({
"style": {
width: "100%"
},
"columnKey": item.key,
"options": options,
"placeholder": t("tableForm.selectPlaceholder")
}, item.fieldProps), null);
}
return createVNode(Input, mergeProps({
"placeholder": t("tableForm.inputPlaceholder"),
"allowClear": true
}, item.fieldProps), null);
}
if (valueType === "select") {
return createVNode(ProSelect, mergeProps({
"style": {
width: "100%"
},
"columnKey": item.key,
"placeholder": t("tableForm.selectPlaceholder"),
"options": options
}, item.fieldProps), null);
}
if (valueType === "date") {
return createVNode(DatePicker, mergeProps({
"format": "YYYY-MM-DD",
"style": {
width: "100%"
}
}, item.fieldProps), null);
}
if (valueType === "dateTime") {
return createVNode(DatePicker, mergeProps({
"showTime": true,
"format": "YYYY-MM-DD HH:mm:ss",
"style": {
width: "100%"
}
}, item.fieldProps), null);
}
if (valueType === "dateRange") {
return createVNode(RangePicker, mergeProps({
"style": {
width: "100%"
}
}, item.fieldProps), null);
}
if (valueType === "dateTimeRange") {
return createVNode(RangePicker, mergeProps({
"showTime": true,
"style": {
width: "100%"
}
}, item.fieldProps), null);
}
if (valueType === "time") {
return createVNode(TimePicker, mergeProps({
"style": {
width: "100%"
}
}, item.fieldProps), null);
}
if (valueType === "textarea" && type === "form") {
return createVNode(Textarea, mergeProps({
"placeholder": t("tableForm.inputPlaceholder")
}, item.fieldProps), null);
}
if (valueType === "checkbox") {
return createVNode(CheckboxGroup, mergeProps({
"options": options
}, item.fieldProps), null);
}
if (valueType === "radio" || valueType === "radioButton") {
return createVNode(RadioGroup, mergeProps({
"type": valueType === "radioButton" ? "button" : "radio",
"options": options
}, item.fieldProps), null);
}
if (valueType === "switch") {
return createVNode(Switch, mergeProps({
"checkedValue": 0,
"uncheckedValue": 1
}, item.fieldProps), null);
}
if (valueType === "uploadFile") {
return createVNode(Upload, mergeProps({
"action": "/"
}, item.fieldProps, {
"multiple": false
}), null);
}
if (typeof valueType === "string" && inputDecimalTypes.includes(valueType)) {
return createVNode(ProInputNumber, mergeProps({
"type": valueType
}, item.fieldProps), null);
}
return createVNode(Input, mergeProps({
"placeholder": t("tableForm.inputPlaceholder"),
"allowClear": true
}, item.fieldProps), null);
};
const defaultSearch = {
searchText: "\u67E5\u8BE2",
resetText: "\u91CD\u7F6E",
submitText: "\u63D0\u4EA4",
collapseRender: (collapsed) => collapsed ? "\u5C55\u5F00" : "\u6536\u8D77"
};
const getDefaultSearch = (search, t, isForm) => {
const config = {
collapseRender: (collapsed) => {
if (collapsed) {
return createVNode(Fragment, null, [t("tableForm.collapsed"), createVNode(IconDown, {
"style": {
verticalAlign: "middle",
fontSize: "16px",
marginLeft: "8px",
transition: "0.3s all",
transform: `rotate(${collapsed ? 0 : 0.5}turn)`
}
}, null)]);
}
return createVNode(Fragment, null, [t("tableForm.expand"), createVNode(IconDown, {
"style": {
verticalAlign: "baseline",
fontSize: "16px",
marginLeft: "8px",
transition: "0.3s all",
transform: `rotate(${collapsed ? 0 : 0.5}turn)`
}
}, null)]);
},
searchText: defaultSearch.searchText,
resetText: defaultSearch.resetText,
submitText: defaultSearch.submitText
};
if (search === void 0 || search === true) {
return config;
}
return {
...config,
...search
};
};
var FormSearch = defineComponent({
name: "ProFormSearch",
props: {
columns: {
type: Array,
default: () => []
},
search: {
type: [Object, Boolean],
default: true
},
type: {
type: String,
default: "table"
},
defaultFormData: {
type: Object,
default: () => ({})
},
formRef: {
type: Function
},
submitButtonLoading: {
type: Boolean
}
},
emits: {
submit: (formData, firstLoad) => true,
reset: (formData) => true,
cancel: () => true
},
setup(props, {
slots,
attrs,
emit
}) {
var _a;
const columns = toRef(props, "columns");
const defaultFormData = toRef(props, "defaultFormData");
const formSearchRef = ref();
const {
t
} = useI18n();
const prefixCls = getPrefixCls("pro-table");
const searchConfig = computed(() => getDefaultSearch(props.search, t, props.type === "form"));
const isForm = computed(() => props.type === "form");
const onReset = () => {
formSearchRef.value.resetFields();
handleReset();
};
const onSubmit = async () => {
var _a2;
const res = await ((_a2 = formSearchRef.value) == null ? void 0 : _a2.validate());
if (!res) {
emit("submit", formModel.value);
}
};
onMounted(() => {
if (props.type === "table") {
emit("submit", defaultFormData.value, true);
}
});
watchEffect(() => {
if (typeof props.formRef === "function" && formSearchRef.value) {
formSearchRef.value.submit = onSubmit;
formSearchRef.value.reset = onReset;
props.formRef(formSearchRef.value);
}
});
const formModel = ref(props.defaultFormData || {});
const collapsed = ref((_a = searchConfig.value.collapsed) != null ? _a : true);
const columnsList = ref([]);
const gridKey = ref(Date.now());
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;
}) || [];
gridKey.value = Date.now();
}, {
deep: true,
immediate: true
});
const handleReset = () => {
emit("reset", formModel.value);
};
const handleSubmit = ({
values,
errors
} = {}) => {
if (!errors) {
emit("submit", values || {});
}
};
const renderGridFormItems = () => {
return createVNode(Grid, mergeProps(gridProps.value, props.search && props.search !== true ? props.search.gridProps : void 0, {
"key": gridKey.value,
"collapsedRows": 1
}), {
default: () => [columnsList.value.map((item, index) => {
var _a2;
const key = genColumnKey(item.key || ((_a2 = item.dataIndex) == null ? void 0 : _a2.toString()), index);
const getTitle = () => {
if (item.title && typeof item.title === "function") {
return item.title(item, "form");
}
return item.title;
};
const title = getTitle();
const valueType = typeof item.valueType === "function" ? item.valueType({}) : item.valueType;
const hidden = valueType === "hidden";
return createVNode(GridItem, mergeProps({
"key": key,
"hidden": hidden
}, item.girdItemProps), {
default: () => {
var _a3;
return [createVNode(FormItem, mergeProps({
"field": item.dataIndex,
"label": !hidden && typeof title === "string" ? title : void 0,
"tooltip": (_a3 = item.formItemProps) == null ? void 0 : _a3.tooltip
}, isForm.value ? item.formItemProps : {}), {
default: () => [cloneVNode(renderFormInput(item, props.type, formModel, formSearchRef, slots, t), {
"modelValue": formModel.value[item.dataIndex],
"onUpdate:modelValue": (value) => {
formModel.value[item.dataIndex] = value;
}
})],
label: () => {
return hidden ? "" : title;
}
})];
}
});
}), createVNode(GridItem, {
"span": 1,
"suffix": true,
"style": [{
"text-align": "right"
}, !isForm.value ? {
"margin-bottom": "20px"
} : {}]
}, {
default: ({
overflow
}) => {
return renderFormOption(collapsed.value ? overflow : true);
}
})]
});
};
const renderFormOption = (showCollapseButton) => {
if (searchConfig.value.optionRender === false) {
return null;
}
const optionProps = {
searchConfig: searchConfig.value,
collapse: collapsed.value,
setCollapse: (value) => {
collapsed.value = value;
},
type: props.type,
submit: onSubmit,
reset: onReset,
dom: [createVNode(Button, {
"onClick": onReset
}, {
default: () => [searchConfig.value.resetText]
}), createVNode(Button, {
"type": "primary",
"htmlType": "submit",
"loading": props.submitButtonLoading
}, {
default: () => [isForm.value ? searchConfig.value.submitText : searchConfig.value.searchText]
})],
form: formSearchRef,
showCollapseButton
};
let dom = null;
if (searchConfig.value.optionRender || (slots == null ? void 0 : slots["option-render"])) {
if (slots == null ? void 0 : slots["option-render"]) {
dom = slots == null ? void 0 : slots["option-render"](optionProps);
}
if (searchConfig.value.optionRender) {
dom = searchConfig.value.optionRender(optionProps);
}
}
return createVNode(Space, {
"size": 16
}, {
default: () => [createVNode(Space, null, {
default: () => [dom || optionProps.dom]
}), !isForm.value && showCollapseButton && createVNode("a", {
"class": `${prefixCls}-collapse-button`,
"onClick": () => {
collapsed.value = !collapsed.value;
}
}, [searchConfig.value.collapseRender && searchConfig.value.collapseRender(collapsed.value)])]
});
};
const gridProps = computed(() => props.type === "form" ? {
cols: 1,
collapsed: false
} : {
cols: {
xs: 1,
sm: 2,
md: 3
},
collapsed: collapsed.value
});
const render = () => {
let _slot;
return createVNode(Form, {
"model": formModel.value,
"ref": formSearchRef,
"layout": isForm.value ? "vertical" : "horizontal",
"onSubmit": handleSubmit
}, _isSlot(_slot = renderGridFormItems()) ? _slot : {
default: () => [_slot]
});
};
return {
render,
selfSubmit: handleSubmit,
selfReset: handleReset,
formSearchRef
};
},
methods: {
submit(data) {
return this.selfSubmit(data);
},
reset() {
return this.selfReset();
}
},
render() {
return this.render();
}
});
export { FormSearch as default, renderFormInput };