d-render
Version:
基于 Element Plus 二次封装的数据驱动渲染组件库 - 表单、搜索表单、表格配置化渲染
259 lines (256 loc) • 8.84 kB
JavaScript
import { defineComponent, ref, watch, computed, h, createVNode, Fragment } from 'vue';
import { ElForm, ElFormItem } from 'element-plus';
import { ArrowUp, ArrowDown } from '@element-plus/icons-vue';
import { CipButton } from '@xdp/button';
import { isEmpty, useFormProvide, useCipConfig, useCipPageConfig, getUsingConfig, getFieldValue, isNumber, useObserveDomResize, debounce } from '@d-render/shared';
import { useComponentProps } from '@xdp/config';
import CipFormItem from '../cip-form-item';
import { useExpand } from './use-expand';
import { cipSearchFormProps } from './props';
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp.call(b, prop))
__defNormalProp(a, prop, b[prop]);
if (__getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(b)) {
if (__propIsEnum.call(b, prop))
__defNormalProp(a, prop, b[prop]);
}
return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
var index = /* @__PURE__ */ defineComponent({
name: "CipSearchForm",
props: cipSearchFormProps,
emits: ["update:model", "search"],
slots: Object,
setup(props, {
emit,
attrs,
slots
}) {
const changeCount = ref(0);
const formModel = ref(props.model);
watch(() => props.model, () => {
var _a;
formModel.value = (_a = props.model) != null ? _a : {};
changeCount.value++;
}, {
immediate: true,
flush: "pre"
});
watch([() => props.defaultModel, changeCount], () => {
if (props.defaultModel && formModel.value) {
const dModel = props.defaultModel;
Object.keys(dModel).forEach((key) => {
if (isEmpty(formModel.value[key]) && !isEmpty(dModel[key])) {
formModel.value[key] = dModel[key];
}
});
}
}, {
immediate: true,
deep: true,
flush: "post"
});
useFormProvide(props);
const cipConfig = useCipConfig();
const cipPageConfig = useCipPageConfig();
const cipSearchForm = ref(null);
const contentWidth = ref(1e3);
const quirks = computed(() => {
return cipConfig == null ? void 0 : cipConfig.quirks;
});
const searchFormPropsKey = [
["collapse", true],
"labelPosition",
// 'grid',
"searchButtonText"
// 'searchReset'
];
const searchFormProps = useComponentProps(props, "searchForm", searchFormPropsKey, [cipPageConfig]);
const gridBridge = computed(() => {
const result = getUsingConfig(
props.grid,
getFieldValue(cipPageConfig, "searchForm.grid"),
getFieldValue(cipConfig, "searchForm.grid"),
getFieldValue(cipConfig, "searchGrid")
// 此值可能为true需要转为0
);
if (result === true || result === void 0)
return 0;
return result;
});
const searchResetBridge = computed(() => {
return getUsingConfig(props.searchReset, getFieldValue(cipPageConfig, "searchForm.searchReset"), getFieldValue(cipConfig, "searchForm.searchReset"), getFieldValue(cipConfig, "searchReset"));
});
const needWatchDom = computed(() => {
return searchFormProps.value.collapse && isNumber(gridBridge.value) && gridBridge.value <= 0;
});
if (needWatchDom.value) {
useObserveDomResize(() => cipSearchForm.value.$el, (e) => {
contentWidth.value = e.contentRect.width;
});
}
const updateModel = (val) => {
emit("update:model", val);
};
const emitSearch = debounce((type) => {
var _a;
(_a = cipSearchForm.value) == null ? void 0 : _a.validate((valid) => {
if (valid) {
emit("search", type);
}
});
}, 200, false);
const resetSearch = () => {
updateModel({});
emitSearch("reset");
};
const gridCount = computed(() => {
const grid = gridBridge.value;
if (isNumber(grid) && grid > 0)
return grid;
const cellWidth = searchFormProps.value.labelPosition === "top" ? 268 : 335;
let count = Math.max(2, Math.floor(contentWidth.value / cellWidth));
if (quirks.value) {
if (count === 5)
count = 4;
if (count > 6)
count = 6;
}
return count;
});
const operationSpan = computed(() => {
var _a;
return Math.max(1, Math.floor((_a = props.operationSpan) != null ? _a : 1));
});
const {
isExpand,
toggleExpand,
haveExpand,
showFieldList,
lastRowSpan,
spanSum
} = useExpand(props, gridCount, searchFormProps, operationSpan);
const isImmediateSearch = (config) => {
return config.immediateSearch === true || config.autoSelect === true;
};
const showResetButton = computed(() => {
return searchResetBridge.value;
});
const arrowIcon = computed(() => {
return isExpand.value ? ArrowUp : ArrowDown;
});
const formItem = ({
key,
config
} = {
key: "",
config: {}
}) => {
return h(CipFormItem, {
key,
model: formModel.value,
fieldKey: key,
config,
changeCount: changeCount.value,
// 对象变化次数
grid: gridCount.value,
labelPosition: searchFormProps.value.labelPosition,
parentDependOnValues: props.dependOnValues,
inParent: props.inForm,
onKeyup: (e) => {
const {
keyCode
} = e;
if (keyCode === 13) {
emitSearch();
}
},
onSearch: () => {
emitSearch();
},
"onUpdate:model": (val) => {
updateModel(val);
if (isImmediateSearch(config))
emitSearch();
}
});
};
const formItemList = () => showFieldList.value.map(formItem);
const formDefaultSlots = () => {
const fieldSlots = formItemList() || [];
if (!props.hideSearch) {
const isOne = showFieldList.value.length === 1;
const buttonList = createVNode(ElFormItem, {
"labelWidth": "0px",
"class": ["cip-search-button", {
"cip-search-button--right": !isOne,
"cip-search-button--absolute": props.handleAbsolute && (isExpand.value && lastRowSpan.value === 0 || !isExpand.value && (haveExpand.value || spanSum.value === gridCount.value) && props.completeRow)
// (spanSum.value % gridCount.value === 0)
}],
"style": {
alignItems: searchFormProps.value.labelPosition === "top" ? "flex-end" : "flex-start",
gridColumn: !isOne ? `${gridCount.value - operationSpan.value + 1} / span ${operationSpan.value}` : void 0
}
}, {
default: () => [slots.operation ? slots.operation({
emitSearch,
resetSearch,
toggleExpand,
isExpand: isExpand.value,
haveExpand: haveExpand.value,
showResetButton: showResetButton.value,
arrowIcon: arrowIcon.value,
searchButtonText: props.searchButtonText
}) : createVNode(Fragment, null, [createVNode(CipButton, {
"buttonType": "search",
"onClick": () => emitSearch()
}, {
default: ({
text
}) => {
var _a;
return (_a = props.searchButtonText) != null ? _a : text;
}
}), showResetButton.value && createVNode(CipButton, {
"buttonType": "reset",
"onClick": () => resetSearch()
}, null), haveExpand.value && createVNode(CipButton, {
"square": true,
"icon": arrowIcon.value,
"onClick": () => toggleExpand()
}, null)])]
});
fieldSlots.push(buttonList);
}
return fieldSlots;
};
return () => h(ElForm, __spreadProps(__spreadValues({}, attrs), {
ref: cipSearchForm,
class: "cip-search-form",
// labelPosition: _labelPosition.value,
size: "default",
style: {
gridTemplateColumns: `repeat(${gridCount.value}, 1fr)`
},
model: formModel.value,
onSubmit: (e) => {
e.preventDefault();
emitSearch();
}
// 防止只有一个搜索项时按会车直接提交form的默认行为
}), {
default: formDefaultSlots
});
}
});
export { index as default };