@form-create/ant-design-vue
Version:
AntDesignVue版本低代码表单|FormCreate 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的低代码表单生成组件。支持6个UI框架,适配移动端,并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件,再复杂的表单都可以轻松搞定。
65 lines (57 loc) • 1.93 kB
JavaScript
import moment from 'moment';
import {creatorFactory} from '@form-create/core/src/index';
const FORMAT_TYPE = {
date: 'YYYY-MM-DD',
month: 'YYYY-MM',
week: 'YYYY-wo',
range: 'YYYY-MM-DD HH:mm:ss'
};
const getType = function (ctx) {
const type = ctx.prop.props.type;
if (['date', 'month', 'week', 'range'].indexOf(type) === -1) return 'date';
return type;
};
const toMoment = function (val) {
return val instanceof moment ? val : moment(val);
};
function getFormat(ctx) {
return ctx.prop.props.format || (ctx.el ? ctx.el.format : '') || FORMAT_TYPE[getType(ctx)];
}
const name = 'datePicker';
export default {
name,
maker: (function () {
return ['date', 'month', 'week'].reduce((initial, type) => {
initial[type] = creatorFactory(name, {type});
return initial
}, {
dateRange: creatorFactory(name, {type:'range'}),
datetimeRange: creatorFactory(name, m => m.props({type: 'range', showTime: true}))
})
}()),
toFormValue(value, ctx) {
let parseValue, type = getType(ctx);
const isArr = Array.isArray(value);
if (type === 'range') {
if (isArr) {
parseValue = value.map(v => v ? toMoment(v) : null);
} else {
parseValue = []
}
} else {
parseValue = isArr ? ((value[0] ? toMoment(value[0]) : null) || null) : (value ? toMoment(value) : null);
}
return parseValue;
},
toValue(formValue, ctx) {
const format = getFormat(ctx);
if (Array.isArray(formValue))
return formValue.map(v => v ? v.format(format) : v);
else
return formValue ? formValue.format(format) : formValue;
},
render(children, ctx) {
const type = getType(ctx) + 'Picker';
return ctx.$render.vNode[type](ctx.prop, children);
}
}