d-render
Version:
数据渲染库 - form、table、search-form
330 lines (327 loc) • 10.2 kB
JavaScript
import { defineComponent, ref, computed, toRefs, watch, h } from 'vue';
import { ElMessage, ElForm } from 'element-plus';
import { DRender, useCipPageConfig, isEmpty, useFormProvide, toUpperFirstCase, getFieldValue } from '@d-render/shared';
import { useConfig, useComponentProps } from '@xdp/config';
import CipFormItem from '../cip-form-item';
import CipFormDirectory from './form-directory';
import CipFormLayout from '../cip-form-layout';
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 __async = (__this, __arguments, generator) => {
return new Promise((resolve, reject) => {
var fulfilled = (value) => {
try {
step(generator.next(value));
} catch (e) {
reject(e);
}
};
var rejected = (value) => {
try {
step(generator.throw(value));
} catch (e) {
reject(e);
}
};
var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
step((generator = generator.apply(__this, __arguments)).next());
});
};
const dRender = new DRender();
var index = /* @__PURE__ */ defineComponent({
name: "CipForm",
props: {
model: Object,
fieldList: Array,
showOnly: Boolean,
modelKey: {
type: [String, Function]
},
grid: {
type: [Number, Boolean]
},
// 是否开启grid布局
useDirectory: Boolean,
labelPosition: String,
labelWidth: [Number, String],
labelSuffix: String,
scrollToError: {
type: Boolean,
default: true
},
equipment: {
type: String,
default: "pc",
validate: (val) => ["pc", "mobile"].includes(val)
},
dataBus: Function,
border: {
type: Boolean,
default: void 0
},
// showOnly + border 将出现边框
// 回车触发回调
enterHandler: Function,
errorMode: {
type: String,
default: void 0
},
genNo: Function
},
emits: ["update:model", "submit", "cancel"],
slots: Object,
setup(props, context) {
const uploadQueue = ref({});
const xdpConfig = useConfig();
const Message = computed(() => {
var _a;
return (_a = xdpConfig.message) != null ? _a : ElMessage;
});
const cipPageConfig = useCipPageConfig();
const formPropsKey = ["border", "labelPosition", "useDirectory", "grid", "scrollToError"];
const formProps = useComponentProps(props, "form", formPropsKey, [cipPageConfig]);
const grid = computed(() => {
if (isEmpty(formProps.value.grid))
return void 0;
if (["pc", "pad"].includes(props.equipment)) {
if (formProps.value.grid === true)
return 3;
return formProps.value.grid;
} else {
return 1;
}
});
const labelPositionBridge = computed(() => {
if (formProps.value.border && props.showOnly) {
return "right";
}
return formProps.value.labelPosition;
});
useFormProvide(props, uploadQueue);
const directoryConfig = ref({});
const {
fieldList
} = toRefs(props);
const cipFormRef = ref();
const updateModel = (val) => {
context.emit("update:model", val);
};
const generateComponentKey = (key) => {
var _a;
if (props.modelKey) {
const appendKey = toUpperFirstCase(key);
if (typeof props.modelKey === "function") {
return `${props.modelKey(props.model)}${appendKey}`;
} else {
const value = getFieldValue((_a = props.model) != null ? _a : {}, props.modelKey);
return `${value || ""}${appendKey}`;
}
} else {
return key;
}
};
const getComponentProps = (key, config, id) => {
const componentKey = generateComponentKey(id || key);
const componentProps = {
key: componentKey,
componentKey,
model: props.model,
fieldKey: key,
config,
dataBus: props.dataBus,
readonly: props.showOnly,
grid: grid.value,
formLabelPosition: labelPositionBridge.value,
labelPosition: labelPositionBridge.value,
changeCount: changeCount.value,
// 对象变化次数
errorMode: props.errorMode,
"onUpdate:model": (val) => {
if (componentKey === generateComponentKey(id || key)) {
updateModel(val);
}
}
};
if (props.enterHandler) {
componentProps.onKeyup = (e) => {
var _a;
const {
keyCode
} = e;
if (keyCode === 13) {
(_a = props.enterHandler) == null ? void 0 : _a.call(props);
}
};
}
return componentProps;
};
const getFormLayout = (componentProps) => {
return h(CipFormLayout, __spreadProps(__spreadValues({}, componentProps), {
onValidate: (cb) => {
validate(cb);
},
onSubmit: () => {
context.emit("submit");
},
onCancel: () => {
context.emit("cancel");
}
}), {
item: ({
children = [],
isShow
} = {
children: []
}) => {
return children.map((v) => getFormDefaultSlot(v, isShow));
}
});
};
const getFormItem = (componentProps) => {
return h(CipFormItem, componentProps);
};
const getFormDefaultSlot = ({
key,
id,
config
} = {
key: "",
config: {}
}, isShow) => {
config._isGrid = grid.value;
config._isShow = isShow;
if (context.slots[key]) {
return context.slots[key]({
key,
config
});
}
const componentProps = getComponentProps(key, config, id);
if (context.slots[`${key}Input`]) {
return h(CipFormItem, __spreadProps(__spreadValues({}, componentProps), {
customSlots: context.slots[`${key}Input`]
}));
}
if (dRender.isLayoutType(config.type)) {
return getFormLayout(componentProps);
} else {
if (config.directory) {
directoryConfig.value[key] = {
label: config.staticInfo || config.label,
level: config.directory
};
}
return getFormItem(componentProps);
}
};
const getFormDefaultSlots = () => {
var _a;
const count = 0;
const list = (_a = fieldList.value) == null ? void 0 : _a.map((v) => {
if (props.genNo)
v.config.no = props.genNo(v, count);
return v;
});
if (formProps.value.useDirectory) {
return list == null ? void 0 : list.map((v) => getFormDefaultSlot(v)).concat([h(CipFormDirectory, {
directory: directoryConfig.value
})]);
} else {
return list == null ? void 0 : list.map((v) => getFormDefaultSlot(v));
}
};
const validateUpload = () => {
return new Promise((resolve) => {
const keys = Object.keys(uploadQueue.value);
for (let i = 0; i < keys.length; i++) {
const key = keys[i];
if (uploadQueue.value[key]) {
Message.value.error("\u8BF7\u7B49\u5F85\u6587\u4EF6\u4E0A\u4F20", "\u63D0\u793A");
resolve(false);
break;
}
}
resolve(true);
});
};
const validateField = (props2, cb) => {
return cipFormRef.value.validateField(props2, cb);
};
const validate = (cb) => __async(this, null, function* () {
const isUpload = yield validateUpload();
if (!isUpload) {
cb(false);
throw new Error("\u8BF7\u7B49\u5F85\u6587\u4EF6\u4E0A\u4F20");
} else {
return new Promise((resolve, reject) => {
cipFormRef.value.validate((isValid, invalidFields) => __async(this, null, function* () {
if (typeof cb === "function")
cb(isValid, invalidFields);
isValid ? resolve(isValid) : reject(isValid);
}));
});
}
});
const clearValidate = () => {
var _a;
return (_a = cipFormRef.value) == null ? void 0 : _a.clearValidate();
};
const changeCount = ref(0);
watch(() => props.model, () => {
changeCount.value++;
}, {
immediate: true
});
context.expose({
validateUpload,
validateField,
validate,
clearValidate
});
return () => h(ElForm, __spreadProps(__spreadValues({}, context.attrs), {
ref: cipFormRef,
hideRequiredAsterisk: true,
model: props.model,
class: ["cip-form", `cip-form--${props.equipment}`, {
"cip-form--grid": grid.value,
"cip-form--border": formProps.value.border && props.showOnly,
"cip-form--readonly": props.showOnly
}],
style: {
gridTemplateColumns: `repeat(${grid.value},1fr)`
},
size: "default",
// labelPosition: _labelPosition.value,
labelWidth: labelPositionBridge.value === "top" ? "100%" : props.labelWidth,
labelSuffix: props.labelSuffix,
scrollToError: formProps.value.scrollToError,
errorMode: props.errorMode,
onSubmit: (ev) => {
ev.preventDefault();
}
}), {
default: () => {
var _a, _b;
return [getFormDefaultSlots(), (_b = (_a = context.slots).default) == null ? void 0 : _b.call(_a)];
}
});
}
});
export { index as default };